Palette

Cerulean Shoreline Whisper

Soft blues and teals evoke the gentle lapping of waves on a pristine shore under a clear, calm sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cerulean Shoreline Whisper 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 Shoreline Whisper.

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

Data visualization

#006D8C#2E9CCA#8AD9EA#E0F2F7#BFD7D2

Palette guide

How to use Cerulean Shoreline Whisper

Overview

The "Cerulean Shoreline Whisper" palette evokes the gentle lapping of waves on a pristine shore under a clear, calm sky. It flows from the deep #006D8C through the vibrant #2E9CCA and the airy #8AD9EA. The palette brightens to the ethereal #E0F2F7, culminating in the soft #BFD7D2, a muted blue-green. This collection is ideal for designers seeking to evoke serenity, natural beauty, or refreshing coastal themes. Developers can apply these hues to create inviting user interfaces for travel, wellness, or eco-conscious brands, ensuring a smooth and captivating visual experience that promotes calm and clarity.

Best used for

Coastal resort branding
Spa and relaxation apps
Eco-friendly product packaging
Summer lifestyle blogs
Marine research platforms
Clean, modern UI design

Suggested color roles

primary

#2E9CCA - A vibrant cerulean, ideal for main headings, navigation bars, or key interactive elements, conveying freshness.

secondary

#006D8C - A deep, muted blue, excellent for subheadings, footers, or secondary content blocks, providing stability.

accent

#8AD9EA - A bright, light blue, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#E0F2F7 - A very light, airy blue, serving as a clean, expansive, and refreshing canvas for content.

text

#006D8C - A deep, muted blue, providing excellent contrast and readability for text on lighter backgrounds like #E0F2F7.

Accessibility notes

Ensure #006D8C text on #E0F2F7 background meets WCAG contrast standards for optimal readability.
Avoid using #8AD9EA or #E0F2F7 for small text against similarly light backgrounds due to low contrast.
The darkest color, #006D8C, provides good contrast for white or very light text.
For body text, prefer #006D8C against the lightest colors for optimal readability.

Recommended combinations

Shoreline Depths

Creates a strong coastal feel, with the deepest blue grounding the design and lightest for clear areas.

#006D8C · #2E9CCA · #E0F2F7

Aqua Whisper

Ideal for soft, airy designs, using the vibrant cerulean for accents or important information.

#8AD9EA · #E0F2F7 · #2E9CCA

Beach Serenity

Excellent for backgrounds or large sections where a gentle, clear blue-green gradient is desired.

#BFD7D2 · #E0F2F7 · #006D8C

CSS variables

:root {
  --cerulean-shoreline-whisper-1: #006D8C;
  --cerulean-shoreline-whisper-2: #2E9CCA;
  --cerulean-shoreline-whisper-3: #8AD9EA;
  --cerulean-shoreline-whisper-4: #E0F2F7;
  --cerulean-shoreline-whisper-5: #BFD7D2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cerulean-shoreline-whisper": {
        1: "#006D8C",
        2: "#2E9CCA",
        3: "#8AD9EA",
        4: "#E0F2F7",
        5: "#BFD7D2",
      }
    }
  }
}

Hex values

Color 1#006D8C

Color 2#2E9CCA

Color 3#8AD9EA

Color 4#E0F2F7

Color 5#BFD7D2

Accessibility

Contrast checker

1.9:1Fail

3.7:1AA18

5.1:1AA

3.9:1AA18

1.9:1Fail

2:1Fail

2.7:1Fail

2.1:1Fail

3.7:1AA18

2:1Fail

1.4:1Fail

1.1:1Fail

5.1:1AA

2.7:1Fail

1.4:1Fail

1.3:1Fail

3.9:1AA18

2.1:1Fail

1.1:1Fail

1.3:1Fail

Similar palettes

More like Cerulean Shoreline Whisper

Cerulean Coastline Calm

Coastal Tide Pool