Palette

Celestial Ocean Depth

Plunging into the dark, mysterious depths where starlight barely touches the vast oceanic abyss.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Ocean Depth 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 Celestial Ocean Depth.

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

Data visualization

#021727#0E385B#2D5F8C#5A9AC5#00080E

Palette guide

How to use Celestial Ocean Depth

Overview

The Celestial Ocean Depth palette plunges into the dark, mysterious depths where starlight barely touches the vast oceanic abyss. Ranging from the ultra-deep #00080E to the luminous cerulean #5A9AC5, this collection of blues offers immense depth and sophistication. The progression from #021727 to #0E385B and #2D5F8C creates a natural gradient, ideal for immersive designs. Designers can leverage this palette to evoke a sense of profound calm and cosmic mystery, while developers will find these distinct hex codes perfect for crafting elegant dark mode interfaces or atmospheric digital environments.

Best used for

Deep-sea exploration or marine biology websites
High-end watch or jewelry brands
Science fiction game environments
Luxury brand dark mode themes
Astrophotography portfolios
Environmental awareness campaigns (ocean focus)

Suggested color roles

primary

#0E385B provides a strong, deep blue foundation for main content areas or brand identity.

secondary

#2D5F8C offers a slightly lighter, yet still deep blue, suitable for supporting sections or interactive elements.

accent

#5A9AC5 delivers a luminous, clear blue, ideal for calls-to-action, highlights, or key information against dark backgrounds.

background

#00080E or #021727 create the deepest, most immersive "abyss" backdrop.

text

Use white or #5A9AC5 for primary text on these deep blue backgrounds to ensure readability.

Accessibility notes

Prioritize white or #5A9AC5 for text on #00080E, #021727, #0E385B, and #2D5F8C to ensure sufficient contrast.
Avoid using the darker blues for text against each other, as contrast will be inadequate.
Ensure all interactive elements have clear visual indicators that meet WCAG contrast requirements.
For data visualization, use clear labels and patterns in addition to color to convey meaning.

Recommended combinations

Abyssal Glow

Ideal for hero sections, combining extreme depth with a striking, luminous highlight.

#00080E · #2D5F8C · #5A9AC5

Ocean Layers

Excellent for layered UI elements or subtle background gradients, creating a sense of natural depth.

#021727 · #0E385B · #2D5F8C

Cosmic Shimmer

Suitable for interactive elements or visual effects that need to stand out with a clear, bright presence.

#0E385B · #2D5F8C · #5A9AC5

CSS variables

:root {
  --celestial-ocean-depth-1: #021727;
  --celestial-ocean-depth-2: #0E385B;
  --celestial-ocean-depth-3: #2D5F8C;
  --celestial-ocean-depth-4: #5A9AC5;
  --celestial-ocean-depth-5: #00080E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-depth": {
        1: "#021727",
        2: "#0E385B",
        3: "#2D5F8C",
        4: "#5A9AC5",
        5: "#00080E",
      }
    }
  }
}

Hex values

Color 1#021727

Color 2#0E385B

Color 3#2D5F8C

Color 4#5A9AC5

Color 5#00080E

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

5.9:1AA

1.1:1Fail

1.5:1Fail

1.8:1Fail

4:1AA18

1.7:1Fail

2.7:1Fail

1.8:1Fail

2.2:1Fail

3:1AA18