Back to palettes

Palette

Coastal Morning Haze

Gentle blues and muted greys evoke a peaceful, misty morning by the ocean shore.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#C7D2D1#A9B0AE#8A9A9A#DCEAF0

Palette guide

How to use Coastal Morning Haze

Overview

The Coastal Morning Haze palette offers a gentle collection of muted blues and greys, evoking the peaceful, misty ambiance of an ocean shore at dawn. With shades ranging from the airy #DCEAF0 to the grounding #8A9A9A, and including the soft #B0C4DE, #C7D2D1, and #A9B0AE. This palette is perfect for designs that aim for a calm, delicate, and serene aesthetic. Developers will find these colors excellent for crafting tranquil user interfaces, gentle branding, and inviting digital experiences that feel both soft and sophisticated.

Best used for

  • Baby and children's product branding
  • Serene photography portfolios
  • Wellness and meditation applications
  • Tranquil interior design mood boards
  • Gentle brand identities and logos
  • Websites with a soft, inviting feel

Suggested color roles

primary

Utilize #B0C4DE as a prominent, calming blue-grey for main sections, headers, or large graphical elements.

secondary

Employ #A9B0AE for secondary information, card backgrounds, or to add a neutral, balancing grey tone.

accent

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

background

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

text

For optimal readability on lighter backgrounds, use #8A9A9A or a dark charcoal like #444444 to ensure clear text presentation.

Accessibility notes

  • Ensure #8A9A9A text has sufficient contrast against #DCEAF0 or #C7D2D1 backgrounds.
  • Avoid using #C7D2D1 or #A9B0AE for small text on #DCEAF0, as contrast may be too low for readability.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.
  • This palette's softer tones require careful contrast checks, especially for body text.

Recommended combinations

Gentle Layers

Excellent for layered content blocks or a soft background with complementary light grey and blue-grey mid-tones.

#DCEAF0 · #C7D2D1 · #A9B0AE

Hazy Depth

Create a sense of depth and hierarchy in UI elements, moving from a light blue-grey to a deeper, grounding grey.

#B0C4DE · #A9B0AE · #8A9A9A

Peaceful Blend

Use a light background with a strong, grounding text color, balanced by a refreshing blue-grey accent.

#DCEAF0 · #8A9A9A · #B0C4DE

CSS variables

:root {
  --coastal-morning-haze-1: #B0C4DE;
  --coastal-morning-haze-2: #C7D2D1;
  --coastal-morning-haze-3: #A9B0AE;
  --coastal-morning-haze-4: #8A9A9A;
  --coastal-morning-haze-5: #DCEAF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-morning-haze": {
        1: "#B0C4DE",
        2: "#C7D2D1",
        3: "#A9B0AE",
        4: "#8A9A9A",
        5: "#DCEAF0",
      }
    }
  }
}

Related searches

gentle blue grey palettepeaceful morning hazesoft coastal colorstranquil grey blue schemesubtle web design

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#C7D2D1
·
Color 3#A9B0AE
·
Color 4#8A9A9A
·
Color 5#DCEAF0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.2:1Fail
1.6:1Fail
1.4:1Fail
2
1.2:1Fail
1.4:1Fail
1.9:1Fail
1.3:1Fail
3
1.2:1Fail
1.4:1Fail
1.3:1Fail
1.8:1Fail
4
1.6:1Fail
1.9:1Fail
1.3:1Fail
2.4:1Fail
5
1.4:1Fail
1.3:1Fail
1.8:1Fail
2.4:1Fail

Similar palettes

More like Coastal Morning Haze

View all cool
Oceanic Stormy Horizon
Stormy Seafoam Weather
Aegean Coastline Calm
Aegean Horizon
Aegean Isle Horizon
Aegean Sea Serene