Palette

Deep Reef Mystery

Plunge into the tranquil and enigmatic world of a hidden coral reef at oceanic depths.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Reef 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 Deep Reef Mystery.

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

Data visualization

#0A2F3D#1C5C7A#3B9BA6#7BC9C4#BFE2DC

Palette guide

How to use Deep Reef Mystery

Overview

The Deep Reef Mystery palette plunges into the tranquil and enigmatic world of a hidden coral reef at oceanic depths. Ranging from the profound #0A2F3D to the serene #BFE2DC, this palette offers a calming yet intriguing aesthetic. Designers can craft soothing digital experiences, captivating branding, and serene UI themes. Developers will find these hex codes perfect for projects related to wellness, nature, or any application that benefits from a cool, balanced, and visually appealing aesthetic. The gentle progression from #1C5C7A to #3B9BA6 allows for excellent depth and visual harmony, making it versatile for both minimalist and detailed designs.

Best used for

Spa and wellness resort websites
Nature photography portfolios
Meditation or mindfulness apps
Eco-friendly product branding
Documentaries on underwater ecosystems
Serene home decor inspiration sites

Suggested color roles

primary

Utilize #1C5C7A as the main background or primary content color, providing a calming, deep, and stable foundation.

secondary

Apply #3B9BA6 for secondary content areas, panels, or navigation, offering a clear visual distinction and layered effect.

accent

Introduce #BFE2DC as a soft, luminous accent for interactive elements, key features, or important data points, ensuring gentle visibility.

background

The deepest hue, #0A2F3D, is excellent for expansive backgrounds or header sections, establishing an immediate tone of profound mystery and calm.

text

For optimal readability, use a crisp white or very light gray. #BFE2DC can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

Ensure high contrast for text on #0A2F3D, #1C5C7A, and #3B9BA6 by using light text (e.g., white or #BFE2DC).
The lightest color, #BFE2DC, provides excellent contrast for primary text against all darker blues and teals in the palette.
Avoid using #0A2F3D and #1C5C7A for small text or critical UI elements in close proximity without careful contrast checks.
Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Reef Layers

Ideal for creating a layered, deep background or card system, conveying gradual depth and natural harmony.

#0A2F3D · #1C5C7A · #3B9BA6

Mystery Glow

Use #1C5C7A as a base, with #7BC9C4 for secondary elements and #BFE2DC for soft, ethereal highlights or interactive states.

#1C5C7A · #7BC9C4 · #BFE2DC

Calm Contrast

Excellent for a dark, profound background with a clear, soft accent and a strong mid-tone for supporting details.

#0A2F3D · #BFE2DC · #3B9BA6

CSS variables

:root {
  --deep-reef-mystery-1: #0A2F3D;
  --deep-reef-mystery-2: #1C5C7A;
  --deep-reef-mystery-3: #3B9BA6;
  --deep-reef-mystery-4: #7BC9C4;
  --deep-reef-mystery-5: #BFE2DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-reef-mystery": {
        1: "#0A2F3D",
        2: "#1C5C7A",
        3: "#3B9BA6",
        4: "#7BC9C4",
        5: "#BFE2DC",
      }
    }
  }
}

Hex values

Color 1#0A2F3D

Color 2#1C5C7A

Color 3#3B9BA6

Color 4#7BC9C4

Color 5#BFE2DC

Accessibility

Contrast checker

1.9:1Fail

4.3:1AA18

7.4:1AAA

10.2:1AAA

1.9:1Fail

2.2:1Fail

3.8:1AA18

5.3:1AA

4.3:1AA18

2.2:1Fail

1.7:1Fail

2.4:1Fail

7.4:1AAA

3.8:1AA18

1.7:1Fail

1.4:1Fail

10.2:1AAA

5.3:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like Deep Reef Mystery

Cerulean Coastline Calm

Cerulean Shoreline Whisper