Back to palettes

Palette

Misty Coastal Cliffs

Soft, muted blues and greys reflecting a foggy morning by rugged sea cliffs.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A9B7C0#6E8898#D1DFE6#4C5E6D#2B3D4A

Palette guide

How to use Misty Coastal Cliffs

Overview

The Misty Coastal Cliffs palette captures the serene yet rugged essence of a foggy coastline, featuring a range of muted blues and greys. From the light, airy #D1DFE6 to the deep, anchoring #2B3D4A, this collection is perfect for designs seeking a calm, sophisticated, and natural feel. The mid-tones like #A9B7C0 and #6E8898 provide excellent versatility for creating depth and hierarchy in user interfaces. This palette evokes tranquility and strength, making it suitable for brands that want to convey reliability, peace, and a connection to nature.

Best used for

  • Maritime or coastal tourism branding
  • Corporate websites with a calm aesthetic
  • Modern architectural portfolios
  • Eco-conscious product design
  • Serene app interfaces
  • Professional service websites

Suggested color roles

primary

#4C5E6D - A deep, muted blue-grey, excellent for headings, primary calls-to-action, or brand accents.

secondary

#6E8898 - A medium blue-grey, suitable for sub-headings, secondary buttons, or background panels.

accent

#A9B7C0 - A soft, light blue-grey, perfect for subtle highlights, hover states, or delicate graphic elements.

background

#D1DFE6 - A very light, airy blue-grey that provides a clean, calming canvas for content.

text

#2B3D4A - A rich, dark blue-grey for main body text, offering strong contrast against lighter shades.

Accessibility notes

  • Ensure #2B3D4A text on #D1DFE6 background meets WCAG contrast ratios for optimal readability.
  • Avoid using #A9B7C0 for small text, especially on backgrounds like #D1DFE6, due to low contrast.
  • Use a darker shade like #4C5E6D for interactive elements to ensure they stand out.
  • For buttons, ensure the text color (e.g., white or #D1DFE6) contrasts well with the button background (e.g., #4C5E6D).

Recommended combinations

Professional Header

Dark, legible text on a crisp, light header background.

#2B3D4A · #D1DFE6 · #A9B7C0

Calm CTA

A primary call-to-action button with a soft, distinct hover state.

#4C5E6D · #A9B7C0 · #6E8898

Section Divider

Subtle visual separation or background variation in content blocks.

#6E8898 · #A9B7C0 · #D1DFE6

CSS variables

:root {
  --misty-coastal-cliffs-1: #A9B7C0;
  --misty-coastal-cliffs-2: #6E8898;
  --misty-coastal-cliffs-3: #D1DFE6;
  --misty-coastal-cliffs-4: #4C5E6D;
  --misty-coastal-cliffs-5: #2B3D4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-coastal-cliffs": {
        1: "#A9B7C0",
        2: "#6E8898",
        3: "#D1DFE6",
        4: "#4C5E6D",
        5: "#2B3D4A",
      }
    }
  }
}

Related searches

misty blue grey palettecoastal color schemesserene ocean colorsmuted cool tonescliff inspired design

Palette colors

Hex values

Color 1#A9B7C0
·
Color 2#6E8898
·
Color 3#D1DFE6
·
Color 4#4C5E6D
·
Color 5#2B3D4A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
1.5:1Fail
3.3:1AA18
5.5:1AA
2
1.8:1Fail
2.7:1Fail
1.8:1Fail
3:1AA18
3
1.5:1Fail
2.7:1Fail
4.9:1AA
8.2:1AAA
4
3.3:1AA18
1.8:1Fail
4.9:1AA
1.7:1Fail
5
5.5:1AA
3:1AA18
8.2:1AAA
1.7:1Fail

Similar palettes

More like Misty Coastal Cliffs

View all cool
Azure Coastline Calm
Coastal Morning Fog
Coastal Serenity Shores
Seaside Dusk Dream
Seaside Mist Veil
Aegean Coastline Calm