Palette

Cerulean Shore Breeze

Captures the refreshing sensation of a cool breeze over a cerulean ocean, with gentle waves and clear skies.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cerulean Shore Breeze 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 Shore Breeze.

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

Data visualization

#6495ED#87CEFA#E0FFFF#4682B4#B0E0E6

Palette guide

How to use Cerulean Shore Breeze

Overview

The "Cerulean Shore Breeze" palette captures the refreshing sensation of a cool breeze over a cerulean ocean, with gentle waves and clear skies. It features the vibrant #6495ED and the airy #87CEFA, creating a serene and expansive atmosphere. The palette brightens with the luminous #E0FFFF, and is grounded by the robust #4682B4. The harmonious #B0E0E6 completes this collection. This palette is ideal for designers seeking to evoke tranquility, coastal themes, or refreshing natural beauty. 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

#6495ED - A vibrant cornflower blue, ideal for main headings, navigation bars, or key interactive elements, conveying freshness.

secondary

#4682B4 - A robust steel blue, excellent for subheadings, footers, or secondary content blocks, providing stability.

accent

#87CEFA - A bright sky blue, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#E0FFFF - A very light aqua, serving as a clean, expansive, and refreshing canvas for content.

text

#4682B4 - A robust steel blue, providing excellent contrast and readability for text on lighter backgrounds like #E0FFFF.

Accessibility notes

Ensure #4682B4 text on #E0FFFF background meets WCAG contrast standards for optimal readability.
Avoid using #87CEFA or #E0FFFF for small text against similarly light backgrounds due to low contrast.
The darkest color, #4682B4, provides good contrast for white or very light text.
For body text, prefer #4682B4 against the lightest colors for optimal readability.

Recommended combinations

Ocean Breeze

Creates a gentle, flowing gradient, ideal for serene backgrounds or header sections, evoking a clear sky.

#E0FFFF · #87CEFA · #6495ED

Shoreline Depth

Excellent for showcasing depth, with the darkest blue grounding the design and lightest for highlights.

#4682B4 · #6495ED · #E0FFFF

Cerulean Calm

Ideal for layered card designs or feature blocks, maintaining a cohesive cool-toned aesthetic.

#B0E0E6 · #87CEFA · #4682B4

CSS variables

:root {
  --cerulean-shore-breeze-1: #6495ED;
  --cerulean-shore-breeze-2: #87CEFA;
  --cerulean-shore-breeze-3: #E0FFFF;
  --cerulean-shore-breeze-4: #4682B4;
  --cerulean-shore-breeze-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cerulean-shore-breeze": {
        1: "#6495ED",
        2: "#87CEFA",
        3: "#E0FFFF",
        4: "#4682B4",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#6495ED

Color 2#87CEFA

Color 3#E0FFFF

Color 4#4682B4

Color 5#B0E0E6

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

1.4:1Fail

2.1:1Fail

1.7:1Fail

1.6:1Fail

2.4:1Fail

1.2:1Fail

2.8:1Fail

1.6:1Fail

3.9:1AA18

1.4:1Fail

2.4:1Fail

3.9:1AA18

2.9:1Fail

2.1:1Fail

1.2:1Fail

1.4:1Fail

2.9:1Fail

Similar palettes

More like Cerulean Shore Breeze

Cerulean Shore Breeze

See it in context.

Ready when you are.

Built with Cerulean Shore Breeze.

How to use Cerulean Shore Breeze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Breeze

Shoreline Depth

Cerulean Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cerulean Shore Breeze