Palette

Ocean Depths Echo

Dive into the serene blues of the deep ocean, where light gradually fades into the abyss.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Depths Echo 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 Ocean Depths Echo.

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

Data visualization

#000B29#00204A#003F88#4A6EAA#9BC3E4

Palette guide

How to use Ocean Depths Echo

Overview

The Ocean Depths Echo palette masterfully transitions from the profound darkness of the abyss to the ethereal glow of the sunlit surface, offering a dynamic and serene range of blues. Starting with an almost black Deep Indigo (#000B29) and moving through a rich Midnight Blue (#00204A) to a vibrant Royal Blue (#003F88), this collection is perfect for illustrating depth and progression. The lighter shades, a muted Steel Blue (#4A6EAA) and a soft Sky Blue (#9BC3E4), provide excellent contrast and breathability. Designers can use this palette to create visually engaging gradients, illustrate data flows, or build user interfaces that evoke calm and clarity.

Best used for

Data visualization dashboards
Educational platforms illustrating complex concepts
Environmental awareness campaigns
Gradient backgrounds for web and mobile apps
Sci-fi or futuristic themed designs
Serene digital art or illustration

Suggested color roles

primary

Deep Indigo (#000B29) for foundational backgrounds, dark mode themes, or prominent headers, conveying gravitas.

secondary

Midnight Blue (#00204A) for content panels, secondary navigation, or supporting graphical elements, adding depth.

accent

Royal Blue (#003F88) to highlight key information, calls-to-action, or interactive components, providing a focal point.

background

Steel Blue (#4A6EAA) as a lighter, breathable background for content areas or card elements, easing readability.

text

Pure white or a very light grey for text on the darker colors, and a dark navy or charcoal for text on #9BC3E4.

Accessibility notes

#000B29, #00204A, and #003F88 require light-colored text (e.g., white) for sufficient contrast.
Ensure good contrast when using #4A6EAA as a background with text, especially with mid-tone text colors.
#9BC3E4 is a light blue; use dark text (e.g., black or dark navy) to meet WCAG AA standards.
Avoid using #000B29 and #00204A for text/background contrast due to their minimal difference.

Recommended combinations

Abyssal Gradient

Ideal for creating deep, progressive background gradients or dark mode themes, moving from darkest to slightly lighter.

#000B29 · #00204A · #003F88

Surface Calm

Perfect for header areas or light content blocks, using #4A6EAA as background, #9BC3E4 for elements, and #003F88 for accents.

#4A6EAA · #9BC3E4 · #003F88

Focal Point

Use #00204A for a primary section, #003F88 for an important button, and #4A6EAA for supporting text or icons.

#00204A · #003F88 · #4A6EAA

CSS variables

:root {
  --ocean-depths-echo-1: #000B29;
  --ocean-depths-echo-2: #00204A;
  --ocean-depths-echo-3: #003F88;
  --ocean-depths-echo-4: #4A6EAA;
  --ocean-depths-echo-5: #9BC3E4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-echo": {
        1: "#000B29",
        2: "#00204A",
        3: "#003F88",
        4: "#4A6EAA",
        5: "#9BC3E4",
      }
    }
  }
}

Hex values

Color 1#000B29

Color 2#00204A

Color 3#003F88

Color 4#4A6EAA

Color 5#9BC3E4

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

3.8:1AA18

10.5:1AAA

1.2:1Fail

1.6:1Fail

3.1:1AA18

8.7:1AAA

1.9:1Fail

1.6:1Fail

2:1Fail

5.5:1AA

3.8:1AA18

3.1:1AA18

2:1Fail

2.8:1Fail

10.5:1AAA

8.7:1AAA

5.5:1AA

2.8:1Fail

Similar palettes

More like Ocean Depths Echo

View all cool

Deep Sea Luminous

Ocean Depths Glimmer

Abyssal Bioluminescence

Cobalt Ocean Depths

Deep Ocean Bloom

Deep Ocean Currents