Back to palettes

Palette

Coastal Haze

A soft, cool palette depicting the tranquil beauty of a foggy coastal morning with gentle sea breezes.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0F8FF#ADD8E6#B0C4DE#778899#C0C0C0

Palette guide

How to use Coastal Haze

Overview

The Coastal Haze palette offers a soft, cool collection of blues and greys, perfectly capturing the tranquil beauty of a misty ocean morning. With shades ranging from the ethereal #F0F8FF to the grounding #778899, and including the gentle #ADD8E6, #B0C4DE, and #C0C0C0. This palette is excellent for designs that aim for an airy, calm, and serene aesthetic. Developers will find these colors versatile for creating lightweight user interfaces, soothing backgrounds, and elegant branding that evokes peace and clarity. It's a superb choice for projects focused on relaxation, nature, or a clean, refreshing visual experience.

Best used for

  • Travel and vacation websites
  • Spa and wellness product branding
  • Weather and environmental apps
  • Children's educational content
  • Serene digital art and photography
  • Light and airy web design layouts

Suggested color roles

primary

Utilize #ADD8E6 as a prominent, refreshing blue for main content areas, headers, or interactive elements.

secondary

Employ #B0C4DE for secondary information, card backgrounds, or to introduce a subtle blue-grey depth.

accent

Apply #778899 sparingly for strong text, important icons, or calls-to-action that require clear but gentle emphasis.

background

The lightest shade, #F0F8FF, is ideal for expansive backgrounds, providing a clean, cool, and ethereal canvas.

text

For optimal readability, use #778899 on lighter backgrounds like #F0F8FF, or a dark grey like #444444 for stronger contrast.

Accessibility notes

  • Ensure #778899 text has sufficient contrast against #F0F8FF or #ADD8E6 backgrounds.
  • Avoid using #ADD8E6 or #B0C4DE for small text on #F0F8FF, as contrast may be too low.
  • Always test all text and interactive elements with a WCAG contrast checker.
  • Consider providing a high-contrast mode for users with visual impairments, as this palette has many light shades.

Recommended combinations

Clear Sky

Excellent for hero sections: a light background, a refreshing primary color, and a grounding dark text.

#F0F8FF · #ADD8E6 · #778899

Gentle Mist

Create soft, layered content blocks or subtle visual transitions with harmonious cool tones.

#B0C4DE · #C0C0C0 · #ADD8E6

Horizon Line

Use a clean background, a strong text color, and a mid-tone for secondary elements or borders.

#F0F8FF · #778899 · #B0C4DE

CSS variables

:root {
  --coastal-haze-1: #F0F8FF;
  --coastal-haze-2: #ADD8E6;
  --coastal-haze-3: #B0C4DE;
  --coastal-haze-4: #778899;
  --coastal-haze-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-haze": {
        1: "#F0F8FF",
        2: "#ADD8E6",
        3: "#B0C4DE",
        4: "#778899",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

light blue grey palette tranquil coastal colorsmisty ocean schemeserene haze hex codesairy cool tones

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#ADD8E6
·
Color 3#B0C4DE
·
Color 4#778899
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
3.4:1AA18
1.7:1Fail
2
1.4:1Fail
1.2:1Fail
2.4:1Fail
1.2:1Fail
3
1.7:1Fail
1.2:1Fail
2:1Fail
1:1Fail
4
3.4:1AA18
2.4:1Fail
2:1Fail
2:1Fail
5
1.7:1Fail
1.2:1Fail
1:1Fail
2:1Fail

Similar palettes

More like Coastal Haze

View all cool
Alpine Morning Mist
Aqua Dream Glow
Azure Coast Serenity
Azure Coastline Calm
Calm Coastal Retreat
Calm Ocean Swell