Palette

Coastal Breeze

Gentle blues and soft sands reflect the tranquil and refreshing spirit of a breezy coast.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#E0FFFF#F5F5DC#B0C4DE

Palette guide

How to use Coastal Breeze

Overview

The Coastal Breeze palette (ID: coastal-breeze-2) embodies the tranquil and refreshing spirit of a breezy coast, with gentle blues and soft sands. Featuring the classic light blue of #ADD8E6, the vibrant sky blue of #87CEEB, and the expansive near-white of #E0FFFF, this collection evokes calm and openness. The warm, creamy #F5F5DC (Beige) adds a grounding, sandy element, while #B0C4DE provides a soft grey-blue. Designers can leverage these hex codes for serene digital experiences or breezy branding. Developers will find these harmonious tones excellent for building user interfaces that feel light, clean, and inviting, perfect for ocean-inspired themes.

Best used for

beach and resort marketing
travel blogs
summer product campaigns
spa and wellness websites
nautical-themed designs
children's educational apps

Suggested color roles

primary

#87CEEB - A clear, bright sky blue, excellent for main headings, call-to-action elements, or key visual anchors.

secondary

#ADD8E6 - A softer, more muted light blue, perfect for sub-sections, background panels, or supportive graphics.

accent

#B0C4DE - A muted grey-blue that offers a subtle contrast and grounding element, ideal for accents or interactive elements.

background

#E0FFFF - A very light, almost white tone (Honeydew), serving as a clean, expansive canvas.

text

A dark navy or charcoal grey for optimal readability, as the palette's colors are generally too light for body text.

Accessibility notes

Ensure any text in #87CEEB has sufficient contrast against very light backgrounds like #E0FFFF or #F5F5DC.
The warm #F5F5DC might have insufficient contrast with the very light backgrounds; verify for readability.
Avoid using #ADD8E6 or #B0C4DE for small text on #E0FFFF or #F5F5DC.
Always use a contrast checker to ensure WCAG AA compliance for all text and interactive elements.

Recommended combinations

Sky & Sand

For creating subtle background gradients or layered elements that evoke a seamless beach scene.

#E0FFFF · #F5F5DC · #ADD8E6

Breezy Accent

To highlight key information or interactive elements, using the sky blue for impact against soft tones.

#87CEEB · #B0C4DE · #E0FFFF

Soft Horizon

Ideal for tranquil banners or decorative elements where a light, cohesive coastal theme is desired.

#ADD8E6 · #F5F5DC · #87CEEB

CSS variables

:root {
  --coastal-breeze-2-1: #ADD8E6;
  --coastal-breeze-2-2: #87CEEB;
  --coastal-breeze-2-3: #E0FFFF;
  --coastal-breeze-2-4: #F5F5DC;
  --coastal-breeze-2-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-breeze-2": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#E0FFFF",
        4: "#F5F5DC",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#E0FFFF

Color 4#F5F5DC

Color 5#B0C4DE

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail

1.6:1Fail

1:1Fail

1.4:1Fail

1.7:1Fail

1:1Fail

1.7:1Fail

1.4:1Fail

1.6:1Fail

1:1Fail

1.6:1Fail

1.2:1Fail

1:1Fail

1.7:1Fail

1.6:1Fail

Similar palettes

More like Coastal Breeze

Coastal Breeze

See it in context.

Ready when you are.

Built with Coastal Breeze.

How to use Coastal Breeze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky & Sand

Breezy Accent

Soft Horizon

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Breeze