Back to palettes

Palette

Coastal Breeze Mist

Soft sea spray and weathered driftwood captured in a gentle morning light.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A2D2FF#B7E0F2#E0FFFF#87CEEB#6A8CA8

Palette guide

How to use Coastal Breeze Mist

Overview

The Coastal Breeze Mist palette (ID: coastal-breeze-mist) captures soft sea spray and weathered driftwood in a gentle morning light. This cool collection ranges from the ethereal #E0FFFF to the muted blue-grey of #6A8CA8, evoking serenity, freshness, and a quiet coastal charm. Designers can leverage these hex codes for ocean-inspired branding, tranquil digital experiences, or refreshing print materials. Developers will find these harmonious tones excellent for building user interfaces that feel light, clean, and inviting, with #A2D2FF providing a bright, clear blue and #87CEEB offering a vibrant, yet calm, accent.

Best used for

  • coastal tourism and travel
  • marine product branding
  • spa and relaxation apps
  • children's educational content (ocean)
  • weather-related services
  • nautical-themed decor

Suggested color roles

primary

#A2D2FF - A bright, clear light blue, excellent for main headings, prominent buttons, or key visual elements.

secondary

#B7E0F2 - A slightly lighter, more muted blue, perfect for sub-sections, background panels, or supportive graphics.

accent

#87CEEB - A vibrant sky blue, offering a powerful accent for calls-to-action, important links, or focal points due to its clarity.

background

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

text

#6A8CA8 - This muted blue-grey offers good readability against lighter backgrounds like #E0FFFF or #B7E0F2.

Accessibility notes

  • Text in #6A8CA8 or #87CEEB on backgrounds like #E0FFFF or #B7E0F2 should meet WCAG AA contrast standards.
  • Avoid using lighter shades like #A2D2FF or #B7E0F2 for small text on the lightest background due to potential low contrast.
  • Ensure interactive elements have clear visual feedback beyond just color, especially for mid-tone blues.
  • Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Sea Spray

For creating subtle background gradients or layered card designs, evoking misty waters.

#E0FFFF · #B7E0F2 · #A2D2FF

Ocean Gaze

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

#87CEEB · #6A8CA8 · #E0FFFF

Breezy Touch

For subtle highlights or decorative elements where a harmonious, cool blue blend is desired.

#A2D2FF · #B7E0F2 · #87CEEB

CSS variables

:root {
  --coastal-breeze-mist-1: #A2D2FF;
  --coastal-breeze-mist-2: #B7E0F2;
  --coastal-breeze-mist-3: #E0FFFF;
  --coastal-breeze-mist-4: #87CEEB;
  --coastal-breeze-mist-5: #6A8CA8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-breeze-mist": {
        1: "#A2D2FF",
        2: "#B7E0F2",
        3: "#E0FFFF",
        4: "#87CEEB",
        5: "#6A8CA8",
      }
    }
  }
}

Related searches

coastal blue palettesea mist colorsserene ocean UIlight blue brandingcool coastal design

Palette colors

Hex values

Color 1#A2D2FF
·
Color 2#B7E0F2
·
Color 3#E0FFFF
·
Color 4#87CEEB
·
Color 5#6A8CA8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.5:1Fail
1.1:1Fail
2.2:1Fail
2
1.1:1Fail
1.3:1Fail
1.2:1Fail
2.5:1Fail
3
1.5:1Fail
1.3:1Fail
1.7:1Fail
3.4:1AA18
4
1.1:1Fail
1.2:1Fail
1.7:1Fail
2:1Fail
5
2.2:1Fail
2.5:1Fail
3.4:1AA18
2:1Fail

Similar palettes

More like Coastal Breeze Mist

View all cool
Ocean Spray Whispers
Azure Coast Serenity
Coastal Mist Horizon
Coastal Seafoam Spray
Mediterranean Harbor Day
Ocean Current Drift