Palette

Oceanic Depths Mystery

A gradual descent into the ocean's profound blues, unveiling the enigma of deep marine environments.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Depths Mystery 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 Oceanic Depths Mystery.

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

Data visualization

#0F2533#2A4B6B#4A7C9F#78AFD0#A8D1ED

Palette guide

How to use Oceanic Depths Mystery

Overview

The Oceanic Depths Mystery palette captures the gradual descent into the ocean's profound blues, unveiling the enigma of deep marine environments. Featuring a sophisticated progression from the very dark #0F2533 to the lighter, ethereal #A8D1ED, with intermediate shades like #2A4B6B, #4A7C9F, and #78AFD0, this palette is highly versatile. Designers and developers can use it to craft serene, professional, or introspective digital experiences. It's excellent for conveying depth, trustworthiness, and a sense of calm. The distinct steps in the gradient allow for clear visual hierarchy and a cohesive aesthetic, ideal for projects that require a thoughtful and immersive blue spectrum.

Best used for

Environmental conservation websites
Educational platforms about marine life
Corporate branding for consulting firms
Serene meditation apps
UX design for data dashboards
Luxury travel brochures

Suggested color roles

primary

Use #0F2533 for the darkest, most foundational elements, anchoring the design with gravitas.

secondary

Apply #2A4B6B to main content blocks or navigation, providing a deep yet readable base.

accent

Employ #78AFD0 or #A8D1ED for interactive elements, highlights, or graphical accents to provide a gentle contrast.

background

Utilize #0F2533 for a deep, immersive background, or #2A4B6B for a slightly lighter, yet still profound, base.

text

For all dark backgrounds, use white or a very light gray like #F0F0F0. For #A8D1ED, a dark charcoal or black is suitable.

Accessibility notes

Ensure sufficient contrast when pairing lighter blues like #78AFD0 or #A8D1ED with text, especially for small font sizes.
Always use white or very light text on the darker shades (#0F2533, #2A4B6B, #4A7C9F) for optimal readability.
Avoid using adjacent shades for text and background without careful contrast checking.
Consider using #A8D1ED as a background for dark text, offering a refreshing and accessible contrast.

Recommended combinations

Deep Gradient

Ideal for creating smooth, deep background transitions or layered design elements.

#0F2533 · #2A4B6B · #4A7C9F

Surface Glimmer

Excellent for headers, graphical accents, or elements that need to appear lighter and more airy.

#78AFD0 · #A8D1ED · #2A4B6B

Contrast Focus

Provides strong visual separation for calls to action or distinct sections.

#0F2533 · #A8D1ED · #4A7C9F

CSS variables

:root {
  --oceanic-depths-mystery-2-1: #0F2533;
  --oceanic-depths-mystery-2-2: #2A4B6B;
  --oceanic-depths-mystery-2-3: #4A7C9F;
  --oceanic-depths-mystery-2-4: #78AFD0;
  --oceanic-depths-mystery-2-5: #A8D1ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-depths-mystery-2": {
        1: "#0F2533",
        2: "#2A4B6B",
        3: "#4A7C9F",
        4: "#78AFD0",
        5: "#A8D1ED",
      }
    }
  }
}

Hex values

Color 1#0F2533

Color 2#2A4B6B

Color 3#4A7C9F

Color 4#78AFD0

Color 5#A8D1ED

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

6.6:1AA

9.8:1AAA

1.7:1Fail

2:1Fail

3.8:1AA18

5.6:1AA

3.5:1AA18

2:1Fail

1.9:1Fail

2.8:1Fail

6.6:1AA

3.8:1AA18

1.9:1Fail

1.5:1Fail

9.8:1AAA

5.6:1AA

2.8:1Fail

1.5:1Fail

Similar palettes

More like Oceanic Depths Mystery

View all cool

Deep Ocean Trench

Abyssal Bioluminescence