Palette

Cerulean Deep Drift

A calming gradient of blues capturing the shifting depths and vastness of the open ocean.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cerulean Deep Drift 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 Cerulean Deep Drift.

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

Data visualization

#003D5C#006D8A#00A2C6#4ABEE6#8CDAF3

Palette guide

How to use Cerulean Deep Drift

Overview

The "Cerulean Deep Drift" palette offers a calming gradient of blues, capturing the shifting depths and vastness of the open ocean. It begins with the profound #003D5C and transitions smoothly through the rich #006D8A and the vibrant #00A2C6. The palette lightens to the airy #4ABEE6, culminating in the luminous #8CDAF3, reminiscent of sunlit waters. This collection is ideal for designers seeking to evoke tranquility, oceanic themes, or deep natural beauty. Developers can apply these hues to create immersive user interfaces for marine research, meditation apps, or eco-conscious brands, ensuring a smooth and captivating visual experience that promotes calm and focus.

Best used for

Marine research websites
Deep sea exploration branding
Meditation and relaxation apps
Eco-tourism promotions
Gradient UI elements
Educational oceanography platforms

Suggested color roles

primary

#006D8A - A deep, calming blue, ideal for main headings, navigation bars, or foundational UI elements, conveying depth.

secondary

#00A2C6 - A vibrant cerulean, excellent for subheadings, active states, or graphical elements that need to pop.

accent

#4ABEE6 - A bright, clear blue, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#003D5C - A very deep, dark blue, serving as an immersive, sophisticated background, especially for dark mode designs.

text

#8CDAF3 - A light, airy blue, providing excellent contrast and readability for text on the dark #003D5C background.

Accessibility notes

Ensure #8CDAF3 text on #003D5C or #006D8A backgrounds meets WCAG contrast standards.
Avoid using #4ABEE6 or #8CDAF3 for small text on similarly light backgrounds due to low contrast.
The darkest colors, #003D5C and #006D8A, provide good contrast for white or very light text.
For body text, prefer #8CDAF3 against the darkest colors for optimal readability.

Recommended combinations

Ocean Gradient

Creates a seamless deep-to-mid blue gradient, ideal for large backgrounds or hero sections.

#003D5C · #006D8A · #00A2C6

Deep Dive

Excellent for showcasing progression or depth, with the lightest blue providing a bright focal point.

#006D8A · #4ABEE6 · #8CDAF3

Cerulean Flow

Ideal for layered UI elements, where a vibrant blue transitions to lighter tones against a deep base.

#00A2C6 · #4ABEE6 · #003D5C

CSS variables

:root {
  --cerulean-deep-drift-1: #003D5C;
  --cerulean-deep-drift-2: #006D8A;
  --cerulean-deep-drift-3: #00A2C6;
  --cerulean-deep-drift-4: #4ABEE6;
  --cerulean-deep-drift-5: #8CDAF3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cerulean-deep-drift": {
        1: "#003D5C",
        2: "#006D8A",
        3: "#00A2C6",
        4: "#4ABEE6",
        5: "#8CDAF3",
      }
    }
  }
}

Hex values

Color 1#003D5C

Color 2#006D8A

Color 3#00A2C6

Color 4#4ABEE6

Color 5#8CDAF3

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

5.4:1AA

7.4:1AAA

2:1Fail

2.8:1Fail

3.8:1AA18

2:1Fail

1.4:1Fail

1.9:1Fail

5.4:1AA

2.8:1Fail

1.4:1Fail

7.4:1AAA

3.8:1AA18

1.9:1Fail

1.4:1Fail

Similar palettes

More like Cerulean Deep Drift

Cerulean Deep Drift

See it in context.

Ready when you are.

Built with Cerulean Deep Drift.

How to use Cerulean Deep Drift

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Gradient

Deep Dive

Cerulean Flow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cerulean Deep Drift