Back to palettes

Palette

Starlight Ocean Deep

A cosmic blend of deep blues and purples, mirroring the profound mystery of the ocean under a starry sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight Ocean Deep 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 Starlight Ocean Deep.

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

Data visualization

#0A1C2C#2E4B6A#57789D#84B1D2#C0E0F0

Palette guide

How to use Starlight Ocean Deep

Overview

The Starlight Ocean Deep palette plunges into the profound mystery of the ocean under a starry sky, blending deep blues and serene aquas. This versatile palette features the dark, grounding #0A1C2C, transitioning to the rich #2E4B6A and the calming #57789D. It then brightens to the ethereal #84B1D2, culminating in the luminous, near-white #C0E0F0. Designers can harness this range to evoke tranquility, depth, and sophistication across various digital and print mediums. The progression from dark to light allows for dynamic visual storytelling and clear content hierarchy. Developers will find these hex codes ideal for creating immersive dark mode themes, elegant corporate websites, or serene nature-themed applications, ensuring a cohesive and visually pleasing experience.

Best used for

  • Marine conservation websites and documentaries
  • High-end travel and resort branding
  • Educational content on oceanography or astronomy
  • Spa or wellness app interfaces
  • Elegant corporate design systems
  • Digital art evoking calm and depth

Suggested color roles

primary

Utilize #0A1C2C as a deep, stable background color, perfect for setting a serious or tranquil mood in headers or large sections.

secondary

Apply #2E4B6A for secondary content areas, card backgrounds, or navigation, offering a supportive blue that maintains depth.

accent

Highlight interactive elements, calls to action, or key information with #57789D or #84B1D2, providing a clear focal point.

background

The darkest shade, #0A1C2C, is excellent for a deep, immersive dark theme. For a lighter, airy background, #C0E0F0 provides a clean, cool base.

text

For text on #0A1C2C or #2E4B6A, use #C0E0F0 or #84B1D2 for optimal readability. On light backgrounds like #C0E0F0, a dark charcoal or black is recommended for text.

Accessibility notes

  • Ensure #C0E0F0 has sufficient contrast against #0A1C2C for body text, meeting WCAG AA requirements.
  • Be mindful of using #57789D on #2E4B6A for small text; check contrast ratios carefully.
  • For interactive elements, confirm that the accent colors provide clear visual distinction against their surrounding background.
  • Use a darker text color (e.g., black or dark gray) for any text placed on the lightest color #C0E0F0.

Recommended combinations

Ocean Gradient

Ideal for background gradients, splash screens, or creating a sense of depth in digital illustrations.

#0A1C2C · #2E4B6A · #57789D

Deep Sea Contrast

Excellent for dark mode interfaces where #0A1C2C is the background and lighter shades are used for text and highlights.

#0A1C2C · #84B1D2 · #C0E0F0

Azure UI

Suitable for card components, navigation bars, or subtle UI elements that need a distinct yet harmonious feel.

#2E4B6A · #57789D · #84B1D2

CSS variables

:root {
  --starlight-ocean-deep-1: #0A1C2C;
  --starlight-ocean-deep-2: #2E4B6A;
  --starlight-ocean-deep-3: #57789D;
  --starlight-ocean-deep-4: #84B1D2;
  --starlight-ocean-deep-5: #C0E0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-ocean-deep": {
        1: "#0A1C2C",
        2: "#2E4B6A",
        3: "#57789D",
        4: "#84B1D2",
        5: "#C0E0F0",
      }
    }
  }
}

Related searches

deep blue ocean palettestarlit water colorsmarine UI designcalm blue color schemecelestial ocean theme

Palette colors

Hex values

Color 1#0A1C2C
·
Color 2#2E4B6A
·
Color 3#57789D
·
Color 4#84B1D2
·
Color 5#C0E0F0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.8:1AA18
7.6:1AAA
12.5:1AAA
2
1.9:1Fail
2:1Fail
3.9:1AA18
6.5:1AA
3
3.8:1AA18
2:1Fail
2:1Fail
3.3:1AA18
4
7.6:1AAA
3.9:1AA18
2:1Fail
1.6:1Fail
5
12.5:1AAA
6.5:1AA
3.3:1AA18
1.6:1Fail

Similar palettes

More like Starlight Ocean Deep

View all dark
Celestial Abyss Gaze
Cosmic Shadow Play
Deep Space Reverie
Abyssal Trench Mystery
Abyssal Trench Mystery
Bioluminescent Deep Trench