Back to palettes

Palette

Coastal Breeze Serene

Inspired by tranquil sea air, whispering waves, and sun-warmed sand on a gentle coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B8DCE0#8EC4CC#5CA9B2#DEE5DE#A6BCC4

Palette guide

How to use Coastal Breeze Serene

Overview

The Coastal Breeze Serene palette is inspired by tranquil sea air, whispering waves, and sun-warmed sand on a gentle coastline. This cool collection ranges from the fresh, almost white #DEE5DE to the deep, grounding #5CA9B2, evoking calm, freshness, and natural beauty. Designers can leverage these hex codes for eco-friendly branding, spa-like digital experiences, or refreshing print materials. Developers will find these harmonious tones excellent for building user interfaces that feel organic, clean, and inviting, with #B8DCE0 providing a balanced mid-tone and #8EC4CC offering a vibrant, yet serene, aqua accent.

Best used for

  • beach resorts and spas
  • eco-conscious product lines
  • nature photography websites
  • meditation and mindfulness apps
  • coastal living blogs
  • sustainable tourism marketing

Suggested color roles

primary

#8EC4CC - A vibrant yet serene aqua, excellent for main headings, primary navigation, or prominent natural brand elements.

secondary

#B8DCE0 - A lighter, supportive aqua-blue, perfect for subheadings, background panels, or supportive graphics.

accent

#5CA9B2 - The deepest, strongest aqua-blue, ideal for strong accents, important links, or focal points that require high contrast and depth.

background

#DEE5DE - The lightest, airy off-white/pale green, providing a clean, fresh, and expansive canvas.

text

#5CA9B2 - This deep aqua-blue offers excellent readability for body text against the lighter backgrounds like #DEE5DE or #B8DCE0.

Accessibility notes

  • Text in #5CA9B2 or #8EC4CC on backgrounds like #DEE5DE or #B8DCE0 should meet WCAG AA contrast standards.
  • Avoid using lighter shades like #B8DCE0 or #A6BCC4 for small text on the lightest background #DEE5DE due to potential low contrast.
  • Ensure interactive elements have clear visual feedback beyond just color, especially for mid-tone aquas.
  • Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Wave Harmony

For creating soft, layered backgrounds or inviting card designs, evoking tranquil waters.

#DEE5DE · #B8DCE0 · #8EC4CC

Deep Ocean Calm

Ideal for professional layouts, using the deeper aquas for headlines and lighter tones for content.

#5CA9B2 · #8EC4CC · #DEE5DE

Coastal Whisper

For content blocks or subtle dividers, maintaining a refreshing and harmonious visual flow with natural depth.

#A6BCC4 · #B8DCE0 · #5CA9B2

CSS variables

:root {
  --coastal-breeze-serene-1: #B8DCE0;
  --coastal-breeze-serene-2: #8EC4CC;
  --coastal-breeze-serene-3: #5CA9B2;
  --coastal-breeze-serene-4: #DEE5DE;
  --coastal-breeze-serene-5: #A6BCC4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-breeze-serene": {
        1: "#B8DCE0",
        2: "#8EC4CC",
        3: "#5CA9B2",
        4: "#DEE5DE",
        5: "#A6BCC4",
      }
    }
  }
}

Related searches

serene coastal paletteaqua blue green colorscalm water UIfresh ocean brandinglight cool green blue scheme

Palette colors

Hex values

Color 1#B8DCE0
·
Color 2#8EC4CC
·
Color 3#5CA9B2
·
Color 4#DEE5DE
·
Color 5#A6BCC4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
1.1:1Fail
1.4:1Fail
2
1.3:1Fail
1.4:1Fail
1.5:1Fail
1:1Fail
3
1.8:1Fail
1.4:1Fail
2.1:1Fail
1.4:1Fail
4
1.1:1Fail
1.5:1Fail
2.1:1Fail
1.5:1Fail
5
1.4:1Fail
1:1Fail
1.4:1Fail
1.5:1Fail

Similar palettes

More like Coastal Breeze Serene

View all cool
Coastal Breeze
Azure Abyss Calm
Azure Lagoon Drift
Azure Reef Currents
Calm Ocean Swell
Cerulean Shore Breeze