Back to palettes

Palette

Cobalt Reef Depths

A mysterious dive into the deep ocean, where vibrant blues meet the shadowy abyss.

darkdark5 colors
More dark 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

#000080#0000CD#4682B4#6A5ACD#191970

Palette guide

How to use Cobalt Reef Depths

Overview

The Cobalt Reef Depths palette offers a mysterious dive into the deep ocean, where vibrant blues meet the shadowy abyss. With hues ranging from the profound #000080 to the unique #6A5ACD, this palette is perfect for designs that evoke mystery, sophistication, and the unexplored beauty of marine life. Designers can leverage #0000CD as a strong primary, while #4682B4 offers a versatile mid-tone for various applications. The deep #191970 provides a compelling base. This palette is ideal for projects that aim for a sophisticated, dark, and immersive visual experience, from marine conservation branding to digital interfaces.

Best used for

  • Marine research and conservation websites
  • Luxury yacht and cruise line branding
  • Aquatic sports and dive gear companies
  • Environmental education platforms
  • Documentaries and media about the ocean
  • Corporate presentations with a calm, authoritative tone

Suggested color roles

primary

#0000CD - A vibrant, true blue that serves as a commanding primary, ideal for main headings, brand logos, or core UI elements, conveying energy and stability.

secondary

#4682B4 - A muted, steel blue that complements the primary, suitable for subheadings, active states, or supporting graphic elements, adding a sense of calm.

accent

#6A5ACD - A medium slate blue with a hint of purple, providing a unique accent, perfect for interactive elements, key data points, or subtle background textures.

background

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

text

For text on #000080 or #191970, use #4682B4 or white for optimal readability. For text on #4682B4, use black or #000080.

Accessibility notes

  • Ensure high contrast when placing light text, such as white, on darker blues like #000080 or #191970.
  • Avoid using #6A5ACD for small text on #4682B4 without verifying WCAG AA compliance due to similar luminance values.
  • The steel blue #4682B4 can be a good intermediate background for dark text, offering a softer alternative to pure white.
  • When using #6A5ACD as an accent, ensure it stands out clearly against its background, particularly for interactive elements.

Recommended combinations

Deep Current

Creates a dramatic, high-contrast interface; #000080 for background, #0000CD for content, #4682B4 for highlights/CTAs.

#000080 · #0000CD · #4682B4

Ocean Vista

Use #191970 for main sections, #4682B4 for supporting elements, and #6A5ACD for vibrant accents or delicate details.

#191970 · #4682B4 · #6A5ACD

Abyssal Layers

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

#000080 · #191970 · #0000CD

CSS variables

:root {
  --cobalt-reef-depths-1: #000080;
  --cobalt-reef-depths-2: #0000CD;
  --cobalt-reef-depths-3: #4682B4;
  --cobalt-reef-depths-4: #6A5ACD;
  --cobalt-reef-depths-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cobalt-reef-depths": {
        1: "#000080",
        2: "#0000CD",
        3: "#4682B4",
        4: "#6A5ACD",
        5: "#191970",
      }
    }
  }
}

Related searches

deep ocean blue palettemarine color schemedark blue brandingwater themed UI designcool dark blues

Palette colors

Hex values

Color 1#000080
·
Color 2#0000CD
·
Color 3#4682B4
·
Color 4#6A5ACD
·
Color 5#191970
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
3.9:1AA18
3:1AA18
1.1:1Fail
2
1.4:1Fail
2.7:1Fail
2.1:1Fail
1.3:1Fail
3
3.9:1AA18
2.7:1Fail
1.3:1Fail
3.6:1AA18
4
3:1AA18
2.1:1Fail
1.3:1Fail
2.8:1Fail
5
1.1:1Fail
1.3:1Fail
3.6:1AA18
2.8:1Fail

Similar palettes

More like Cobalt Reef Depths

View all dark
Abyss Gaze
Abyssal Bioluminescence
Abyssal Bioluminescent Glow
Abyssal Coral Forms
Abyssal Coral Glow
Abyssal Depths