Back to palettes

Palette

Ocean Depths Glimmer

A captivating journey from dark to light blues, evoking the luminous mystery of the deep ocean.

coolcalm5 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

#0B2B3F#1F4C68#3A7FA3#69B0D1#A1DDEB

Palette guide

How to use Ocean Depths Glimmer

Overview

The Ocean Depths Glimmer palette (variant 6) provides a captivating journey from the enigmatic darkness of the ocean's floor to the serene lightness of its surface. It begins with a deep, almost charcoal teal (#0B2B3F) and smoothly transitions through a rich Dark Cyan (#1F4C68) and a balanced Cadet Blue (#3A7FA3). The lighter hues, a refreshing Sky Blue (#69B0D1) and a soft Pale Turquoise (#A1DDEB), infuse the palette with a sense of openness and tranquility. This collection is ideal for designers and developers aiming to create calming yet engaging interfaces, nature-inspired branding, or digital content that evokes clarity, depth, and a breath of fresh air.

Best used for

  • Wellness and lifestyle apps
  • Eco-friendly product packaging
  • Travel and tourism websites (especially coastal)
  • Educational content about nature or science
  • Serene digital dashboards
  • Relaxing UI themes

Suggested color roles

primary

Deep Teal (#0B2B3F) for foundational backgrounds, dark mode themes, or prominent headers, conveying stability.

secondary

Dark Cyan (#1F4C68) for content panels, secondary navigation, or card backgrounds, adding visual interest.

accent

Pale Turquoise (#A1DDEB) to highlight calls-to-action, key information, or interactive elements, providing a bright, airy pop.

background

Cadet Blue (#3A7FA3) 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 #A1DDEB.

Accessibility notes

  • The darker colors (#0B2B3F, #1F4C68, #3A7FA3) require light text (e.g., white) for sufficient contrast.
  • #69B0D1 offers good contrast with white text and can support dark text for specific design elements.
  • #A1DDEB is the lightest color; ensure dark text (e.g., black or dark navy) is used for optimal readability.
  • Avoid using #0B2B3F and #1F4C68 for text/background contrast due to their subtle differences.

Recommended combinations

Deep Tranquility

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

#0B2B3F · #1F4C68 · #3A7FA3

Glimmering Surface

Use #3A7FA3 as a content background, #A1DDEB for a soft call-to-action, and #69B0D1 for supporting text.

#3A7FA3 · #A1DDEB · #69B0D1

Clear Horizon

Ideal for a clean UI, with #1F4C68 for main sections, #69B0D1 for interactive elements, and #0B2B3F for headers.

#1F4C68 · #69B0D1 · #0B2B3F

CSS variables

:root {
  --ocean-depths-glimmer-6-1: #0B2B3F;
  --ocean-depths-glimmer-6-2: #1F4C68;
  --ocean-depths-glimmer-6-3: #3A7FA3;
  --ocean-depths-glimmer-6-4: #69B0D1;
  --ocean-depths-glimmer-6-5: #A1DDEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-glimmer-6": {
        1: "#0B2B3F",
        2: "#1F4C68",
        3: "#3A7FA3",
        4: "#69B0D1",
        5: "#A1DDEB",
      }
    }
  }
}

Related searches

deep teal to light blue palettetranquil ocean UI colorscalm blue green schemeserene marine brandingaquatic gradient design

Palette colors

Hex values

Color 1#0B2B3F
·
Color 2#1F4C68
·
Color 3#3A7FA3
·
Color 4#69B0D1
·
Color 5#A1DDEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.3:1AA18
6.1:1AA
9.8:1AAA
2
1.6:1Fail
2.1:1Fail
3.8:1AA18
6.1:1AA
3
3.3:1AA18
2.1:1Fail
1.8:1Fail
3:1Fail
4
6.1:1AA
3.8:1AA18
1.8:1Fail
1.6:1Fail
5
9.8:1AAA
6.1:1AA
3:1Fail
1.6:1Fail

Similar palettes

More like Ocean Depths Glimmer

View all cool
Azure Reef Sanctuary
Deep Reef Mystery
Abyssal Blue Descent
Aegean Coast Whisper
Aqua Marine Vista
Aqua Ocean Dream