Palette

Moonlit Ocean Shimmer

A deep, tranquil collection of blues and greys, reflecting the mesmerizing shimmer of moonlight on the dark ocean surface.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Ocean Shimmer reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Moonlit Ocean Shimmer.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#0F2027#2C5364#5C7F8C#A7C5D4#1B3C47

Palette guide

How to use Moonlit Ocean Shimmer

Overview

The Moonlit Ocean Shimmer palette evokes the mysterious depth of the ocean under a night sky, offering a sophisticated range of deep blues and muted greys. Starting with the profound #0F2027, reminiscent of the darkest depths, it transitions through rich tones like #2C5364 and #1B3C47, balancing with the more reflective #5C7F8C and the serene #A7C5D4. This palette is ideal for designs requiring a sense of calm, elegance, and a touch of mystery. It’s particularly well-suited for high-end brands, luxury experiences, or projects that benefit from a tranquil yet powerful visual identity, creating an immersive and contemplative atmosphere.

Best used for

Luxury spa or wellness retreats
High-end maritime or yachting brands
Mystical or fantasy-themed digital art
Elegant evening wear fashion lines
Dark mode interfaces for professional apps
Sophisticated interior design concepts

Suggested color roles

primary

#1B3C47 - A deep, impactful blue-green, excellent for primary branding elements, strong headlines, or main interactive components.

secondary

#2C5364 - Use this rich, desaturated blue for supporting headers, important subtext, or secondary navigation, providing depth without overwhelming.

accent

#5C7F8C - A softer, more reflective blue-grey, perfect for subtle highlights, interactive states, or graphical details that need to shimmer.

background

#0F2027 - This very dark blue-grey serves as an excellent, atmospheric background, providing a sense of depth and luxury.

text

For light text, #A7C5D4 provides good contrast on dark backgrounds. Pure white is also effective for maximum readability.

Accessibility notes

Ensure all text on #0F2027, #1B3C47, and #2C5364 backgrounds uses sufficiently light colors (e.g., #A7C5D4 or white) to meet WCAG contrast guidelines.
Avoid using #5C7F8C for small text on #A7C5D4 background due to potential low contrast.
Critical interactive elements should use colors with high contrast against their background, such as #A7C5D4 on #0F2027.
For headings, aim for a minimum contrast of 3:1 with the background for larger text, and 4.5:1 for standard body text.

Recommended combinations

Deep Ocean Interface

Creates a sophisticated dark mode UI, with the lightest color for text and the darkest for backgrounds.

#0F2027 · #1B3C47 · #A7C5D4

Elegant Branding

Ideal for logos and brand assets that convey professionalism, depth, and a touch of mystery.

#2C5364 · #5C7F8C · #A7C5D4

Subtle Accent

Use the light blue as an accent against the darkest background, with the mid-tone for subtle highlights.

#0F2027 · #A7C5D4 · #5C7F8C

CSS variables

:root {
  --moonlit-ocean-shimmer-1: #0F2027;
  --moonlit-ocean-shimmer-2: #2C5364;
  --moonlit-ocean-shimmer-3: #5C7F8C;
  --moonlit-ocean-shimmer-4: #A7C5D4;
  --moonlit-ocean-shimmer-5: #1B3C47;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-ocean-shimmer": {
        1: "#0F2027",
        2: "#2C5364",
        3: "#5C7F8C",
        4: "#A7C5D4",
        5: "#1B3C47",
      }
    }
  }
}

Hex values

Color 1#0F2027

Color 2#2C5364

Color 3#5C7F8C

Color 4#A7C5D4

Color 5#1B3C47

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

9.2:1AAA

1.4:1Fail

2:1Fail

1.9:1Fail

4.6:1AA

1.4:1Fail

3.9:1AA18

1.9:1Fail

2.4:1Fail

2.7:1Fail

9.2:1AAA

4.6:1AA

2.4:1Fail

6.5:1AA

1.4:1Fail

2.7:1Fail

6.5:1AA

Similar palettes

More like Moonlit Ocean Shimmer

Moonlit Ocean Shimmer

See it in context.

Ready when you are.

Built with Moonlit Ocean Shimmer.

How to use Moonlit Ocean Shimmer

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Ocean Interface

Elegant Branding

Subtle Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Moonlit Ocean Shimmer