Palette

Ocean Depths Glare

Exploring the enigmatic depths of the ocean, where shadows and light softly intertwine.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B0B2A#1A2A4A#2E4F70#4A6E90#7DAAC9

Palette guide

How to use Ocean Depths Glare

Overview

The Ocean Depths Glare palette offers a sophisticated gradient from profound, almost black depths to lighter, serene blues, mirroring the subtle interplay of shadows and light beneath the ocean's surface. Starting with a deep, inky #0B0B2A and progressing through a rich Midnight Blue (#1A2A4A) and a muted Steel Blue (#2E4F70), this collection evokes tranquility and mystery. The lighter hues, a soft Cadet Blue (#4A6E90) and a refreshing Sky Blue (#7DAAC9), provide excellent contrast and versatility. Designers can leverage this palette for creating immersive digital experiences, elegant branding, or any project aiming for a calm yet engaging visual narrative with a cool, understated appeal.

Best used for

High-tech corporate websites
Serene meditation or wellness apps
Environmental or oceanographic presentations
Digital interfaces with a dark mode option
Luxury travel brochures
Architectural visualization backgrounds

Suggested color roles

primary

Deep Indigo (#0B0B2A) for strong foundational elements, dark mode backgrounds, or striking headers, conveying gravitas.

secondary

Midnight Blue (#1A2A4A) for content panels, secondary navigation, or card backgrounds, adding visual weight.

accent

Sky Blue (#7DAAC9) to highlight calls-to-action, important data points, or interactive elements, providing a refreshing pop.

background

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

text

Pure white or a very light grey for text on the darker colors; a deep charcoal or navy for text on #7DAAC9.

Accessibility notes

The darker colors (#0B0B2A, #1A2A4A, #2E4F70) require light text (e.g., white) for WCAG AA compliance.
#4A6E90 provides good contrast with white text, but also supports dark text for specific uses.
#7DAAC9 is the lightest color; pair it with dark text (e.g., black or dark navy) for optimal readability.
Avoid low contrast text/background pairings, especially with similar adjacent tones like #0B0B2A and #1A2A4A.

Recommended combinations

Deep Calm

Perfect for creating a deep, immersive background gradient or layered dark UI elements, providing subtle progression.

#0B0B2A · #1A2A4A · #2E4F70

Glare Accent

Use #2E4F70 as a content background, #7DAAC9 for a prominent button, and #1A2A4A for supporting text or icons.

#2E4F70 · #7DAAC9 · #1A2A4A

Serene Interface

Ideal for a light-on-dark interface, using #4A6E90 for main content, #7DAAC9 for interactive elements, and #0B0B2A for headers.

#4A6E90 · #7DAAC9 · #0B0B2A

CSS variables

:root {
  --ocean-depths-glare-1: #0B0B2A;
  --ocean-depths-glare-2: #1A2A4A;
  --ocean-depths-glare-3: #2E4F70;
  --ocean-depths-glare-4: #4A6E90;
  --ocean-depths-glare-5: #7DAAC9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-glare": {
        1: "#0B0B2A",
        2: "#1A2A4A",
        3: "#2E4F70",
        4: "#4A6E90",
        5: "#7DAAC9",
      }
    }
  }
}

Hex values

Color 1#0B0B2A

Color 2#1A2A4A

Color 3#2E4F70

Color 4#4A6E90

Color 5#7DAAC9

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

3.6:1AA18

7.7:1AAA

1.3:1Fail

1.7:1Fail

2.7:1Fail

5.7:1AA

2.3:1Fail

1.7:1Fail

1.6:1Fail

3.4:1AA18

3.6:1AA18

2.7:1Fail

1.6:1Fail

2.2:1Fail

7.7:1AAA

5.7:1AA

3.4:1AA18

2.2:1Fail

Similar palettes

More like Ocean Depths Glare

View all cool

Abyssal Current Glide

Emerald Grotto Depths