Palette

Ocean Depths Glimmer

Explores the mysterious, serene gradients of the deep ocean, where light barely penetrates.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F1E33#1A375A#2C5784#4D87B4#7AC3E9

Palette guide

How to use Ocean Depths Glimmer

Overview

The Ocean Depths Glimmer palette (variant 4) meticulously crafts a serene gradient from the inkiest depths to the softest, most ethereal sky blue, capturing the subtle play of light in the deep ocean. It starts with a profound Charcoal Blue (#0F1E33) and progresses through a rich Dark Cerulean (#1A375A) to a balanced Steel Blue (#2C5784). The lighter shades, a muted Sky Blue (#4D87B4) and a tranquil Light Blue (#7AC3E9), offer excellent luminosity and airiness. This palette is perfect for designers and developers seeking to evoke calm, mystery, and natural beauty, ideal for creating sophisticated user interfaces, immersive digital environments, or branding that conveys serenity and depth.

Best used for

Meditation and mindfulness applications
Environmental conservation websites
Luxury travel and resort branding
Weather forecasting apps or dashboards
Serene digital art and photography presentations
Educational content about marine life

Suggested color roles

primary

Charcoal Blue (#0F1E33) for foundational backgrounds, dark mode themes, or prominent headers, conveying deep calm.

secondary

Dark Cerulean (#1A375A) for content panels, secondary navigation, or card backgrounds, adding subtle texture.

accent

Light Blue (#7AC3E9) to highlight calls-to-action, key information, or interactive elements, providing a soft glow.

background

Steel Blue (#2C5784) for content areas, offering a balanced and calming backdrop that supports readability.

text

Pure white or a very light grey for text on darker colors; a dark charcoal or navy for text on #7AC3E9.

Accessibility notes

The darker colors (#0F1E33, #1A375A, #2C5784) require light text (e.g., white) for sufficient contrast.
#4D87B4 offers good contrast with white text, but can also support dark text for specific design elements.
#7AC3E9 is the lightest blue; ensure dark text (e.g., black or dark navy) is used for optimal readability.
Avoid placing text in #0F1E33 on a #1A375A background due to minimal contrast.

Recommended combinations

Deep Serenity

Create a profound, calming background gradient or layered dark UI elements, suggesting depth and peace.

#0F1E33 · #1A375A · #2C5784

Glimmering Highlight

Use #2C5784 as a content background, #7AC3E9 for a soft call-to-action, and #4D87B4 for supporting text.

#2C5784 · #7AC3E9 · #4D87B4

Ethereal Interface

Ideal for a sophisticated UI, with #1A375A for main sections, #4D87B4 for interactive elements, and #0F1E33 for headers.

#1A375A · #4D87B4 · #0F1E33

CSS variables

:root {
  --ocean-depths-glimmer-4-1: #0F1E33;
  --ocean-depths-glimmer-4-2: #1A375A;
  --ocean-depths-glimmer-4-3: #2C5784;
  --ocean-depths-glimmer-4-4: #4D87B4;
  --ocean-depths-glimmer-4-5: #7AC3E9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-glimmer-4": {
        1: "#0F1E33",
        2: "#1A375A",
        3: "#2C5784",
        4: "#4D87B4",
        5: "#7AC3E9",
      }
    }
  }
}

Hex values

Color 1#0F1E33

Color 2#1A375A

Color 3#2C5784

Color 4#4D87B4

Color 5#7AC3E9

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

4.3:1AA18

8.6:1AAA

1.4:1Fail

1.6:1Fail

3.1:1AA18

6.2:1AA

2.2:1Fail

1.6:1Fail

1.9:1Fail

3.9:1AA18