Back to palettes

Palette

Cobalt Reef Depths

Immense blues plunge into the cold, silent depths of an unexplored coral reef.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cobalt Reef Depths 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 Cobalt Reef Depths.

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

Data visualization

#0a1e3c#1a3e6a#3c6b9d#649bd1#9ecbf0

Palette guide

How to use Cobalt Reef Depths

Overview

The Cobalt Reef Depths palette immerses you in immense blues, plunging into the cold, silent depths of an unexplored coral reef. With colors ranging from the profound #0a1e3c to the luminous #9ecbf0, this palette is perfect for designs that evoke mystery, tranquility, and the vastness of the underwater world. Designers can leverage #1a3e6a as a strong primary, while #3c6b9d offers a versatile mid-tone for various applications. The brightest hue, #649bd1, provides a compelling highlight. This palette is ideal for projects that aim for a sophisticated, calm, and immersive visual experience, from marine conservation branding to digital interfaces.

Best used for

  • Marine research and conservation websites
  • Aquarium and ocean park branding
  • Underwater photography portfolios
  • Luxury resort and spa visuals (oceanic theme)
  • Educational content about marine biology
  • Environmental advocacy campaigns

Suggested color roles

primary

#1a3e6a - A deep, authoritative blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying trust and stability.

secondary

#3c6b9d - A vibrant, yet deep blue, suitable for subheadings, active states, or supporting graphic elements, adding dynamism.

accent

#9ecbf0 - A bright, clear blue that provides a striking highlight, perfect for interactive elements, key data points, or urgent notifications, evoking light filtering through water.

background

#0a1e3c - An intensely dark, almost black-blue, creating an immersive, sophisticated backdrop that enhances the luminosity of lighter blues.

text

For text on #0a1e3c or #1a3e6a, use #9ecbf0 or white for optimal readability. For text on #9ecbf0, use black or #0a1e3c.

Accessibility notes

  • Ensure high contrast when placing light text, such as #9ecbf0, on darker blues like #0a1e3c or #1a3e6a.
  • Avoid using #649bd1 for small text on #3c6b9d without verifying WCAG AA compliance due to similar luminance values.
  • The brightest hue, #9ecbf0, offers excellent contrast against all darker blues in the palette for interactive elements.
  • When using #9ecbf0 as a background, ensure text is in a contrasting dark color like black or #0a1e3c to maintain legibility.

Recommended combinations

Reef Light

Creates a dramatic, high-contrast interface; #0a1e3c for background, #3c6b9d for content, #9ecbf0 for bright highlights/CTAs.

#0A1E3C · #3C6B9D · #9ECBF0

Deep Coral

Use #1a3e6a for main sections, #649bd1 for supporting elements, and #9ecbf0 for vibrant accents or delicate details.

#1A3E6A · #649BD1 · #9ECBF0

Underwater Abyss

Ideal for creating depth through gradients or layered UI, moving from the deepest blue to a rich, true blue.

#0A1E3C · #1A3E6A · #3C6B9D

CSS variables

:root {
  --cobalt-reef-depths-2-1: #0a1e3c;
  --cobalt-reef-depths-2-2: #1a3e6a;
  --cobalt-reef-depths-2-3: #3c6b9d;
  --cobalt-reef-depths-2-4: #649bd1;
  --cobalt-reef-depths-2-5: #9ecbf0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-reef-depths-2": {
        1: "#0a1e3c",
        2: "#1a3e6a",
        3: "#3c6b9d",
        4: "#649bd1",
        5: "#9ecbf0",
      }
    }
  }
}

Related searches

deep blue reef paletteoceanic cool color schemeunderwater branding colorsserene dark blue UIaquatic depth palette

Palette colors

Hex values

Color 1#0a1e3c
·
Color 2#1a3e6a
·
Color 3#3c6b9d
·
Color 4#649bd1
·
Color 5#9ecbf0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3:1Fail
5.7:1AA
9.7:1AAA
2
1.5:1Fail
1.9:1Fail
3.7:1AA18
6.3:1AA
3
3:1Fail
1.9:1Fail
1.9:1Fail
3.2:1AA18
4
5.7:1AA
3.7:1AA18
1.9:1Fail
1.7:1Fail
5
9.7:1AAA
6.3:1AA
3.2:1AA18
1.7:1Fail

Similar palettes

More like Cobalt Reef Depths

View all cool
Abyssal Blue Descent
Abyssal Current Glide
Azure Abyss Calm
Azure Canopy Light
Azure Ocean Current
Celestial Ocean Dream