Palette

Cosmic Ocean Deep

Reflecting the deep mysteries of the ocean mirroring the vast, unexplored cosmos above.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Ocean Deep 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 Cosmic Ocean Deep.

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

Data visualization

#001F3F#1C3F71#6497B1#B3CDE0#E0F2F7

Palette guide

How to use Cosmic Ocean Deep

Overview

The Cosmic Ocean Deep palette reflects the profound mysteries of the ocean, mirroring the vast, unexplored cosmos above. It anchors with the ultra-deep #001F3F (midnight blue) and the rich #1C3F71 (dark cerulean), transitioning beautifully through the serene #6497B1 (sky blue) and the softer #B3CDE0 (pale blue). The palette culminates in the ethereal #E0F2F7 (near white-blue), evoking a tranquil, boundless expanse. This cool and dark collection is perfect for designers and developers crafting serene, sophisticated, or trustworthy digital experiences. It excels in creating atmospheric backgrounds, professional branding, and UI elements that convey depth, calm, and a sense of endless discovery.

Best used for

Professional corporate websites and app interfaces
Oceanographic or space exploration branding
Serene digital art and abstract illustrations
Educational content about science and nature
Luxury product packaging and marketing
Calm environmental graphics and presentations

Suggested color roles

primary

Utilize #001F3F as a deep, anchoring background color, establishing a calm, professional canvas for content to unfold.

secondary

Employ #1C3F71 for significant content areas, subheadings, or distinct sections, offering a rich, supporting blue hue.

accent

Apply #6497B1 for subtle highlights, interactive states, or as a secondary text color on dark backgrounds, adding a touch of sophisticated blue.

background

The darker blues like #001F3F and #1C3F71 are ideal for expansive, tranquil backdrops, while #E0F2F7 can be used for subtle, glowing elements or light mode accents.

text

For optimal readability on dark backgrounds like #001F3F or #1C3F71, use #E0F2F7 or a crisp white. A deep charcoal or black provides excellent contrast on #B3CDE0 or #E0F2F7.

Accessibility notes

Ensure sufficient contrast between #E0F2F7 and the darker background colors, especially for body text.
White text on #001F3F, #1C3F71, and #6497B1 generally provides good readability.
Avoid using #B3CDE0 as a text color on #6497B1 due to potential low contrast; reserve it for larger UI elements.
Test color combinations for legibility across various screen types and lighting conditions to maintain the desired mood.

Recommended combinations

Deep Sea Core

Creates a deep, harmonious blue gradient, perfect for professional backgrounds or subtly layered UI designs.

#001F3F · #1C3F71 · #6497B1

Oceanic Shimmer

Ideal for subtle gradients, ethereal overlays, or conveying a soft, luminous glow in illustrations and decorative elements.

#6497B1 · #B3CDE0 · #E0F2F7

Cosmic Depth

Excellent for establishing clear hierarchy, with a light highlight against a dark canvas, enhanced by a serene blue accent.

#001F3F · #E0F2F7 · #B3CDE0

CSS variables

:root {
  --cosmic-ocean-deep-1: #001F3F;
  --cosmic-ocean-deep-2: #1C3F71;
  --cosmic-ocean-deep-3: #6497B1;
  --cosmic-ocean-deep-4: #B3CDE0;
  --cosmic-ocean-deep-5: #E0F2F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-ocean-deep": {
        1: "#001F3F",
        2: "#1C3F71",
        3: "#6497B1",
        4: "#B3CDE0",
        5: "#E0F2F7",
      }
    }
  }
}

Hex values

Color 1#001F3F

Color 2#1C3F71

Color 3#6497B1

Color 4#B3CDE0

Color 5#E0F2F7

Accessibility

Contrast checker

1.6:1Fail

5.2:1AA

10:1AAA

14.4:1AAA

1.6:1Fail

3.3:1AA18

6.4:1AA

9.1:1AAA

5.2:1AA

3.3:1AA18

1.9:1Fail

2.8:1Fail

10:1AAA

6.4:1AA

1.9:1Fail

1.4:1Fail

14.4:1AAA

9.1:1AAA

2.8:1Fail

1.4:1Fail

Similar palettes

More like Cosmic Ocean Deep

View all cool

Deep Space Mariner

Abyssal Current Glide

Bioluminescent Abyss

Celestial Deep Nebula

Cobalt Abyss Depths

Cobalt Midnight Sky