Palette

Coastal Morning Fog

Muted blues and greens reflecting the serene calm of a foggy coastal morning.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DDEEF1#A9CCD2#75A5AD#4E7B82#2C4A51

Palette guide

How to use Coastal Morning Fog

Overview

The Coastal Morning Fog palette offers a sophisticated collection of muted blue-greens and deep greys, perfectly capturing the serene calm of a foggy coastal morning. Ranging from the airy #DDEEF1 to the profound #2C4A51, with versatile mid-tones like #A9CCD2, #75A5AD, and #4E7B82. This palette is ideal for designs that aim for a calm, professional, and grounded aesthetic. Developers will find these colors excellent for crafting robust user interfaces, corporate branding, and immersive digital environments that convey depth and tranquility.

Best used for

Environmental reports and publications
Calm corporate and professional branding
Nature documentary websites
Sophisticated web and mobile applications
Tranquil digital art and photography
Sustainable living content

Suggested color roles

primary

Utilize #75A5AD as a strong, versatile mid-tone for main content areas, navigation, or prominent UI elements.

secondary

Employ #A9CCD2 for secondary information, subheadings, or as a lighter background for distinct content blocks.

accent

Apply #2C4A51 sparingly for impactful calls-to-action, important icons, or as a deep footer/header color.

background

The lightest shade, #DDEEF1, is ideal for primary backgrounds, providing a clean yet soft foundation that supports darker elements.

text

For optimal readability on light backgrounds, use #2C4A51. On darker backgrounds like #4E7B82, use a near-white such as #F0F0F0.

Accessibility notes

Ensure #2C4A51 text has excellent contrast against #DDEEF1 or #A9CCD2 backgrounds.
Check contrast for #75A5AD text on #DDEEF1; it should be sufficient but verify.
Avoid using #A9CCD2 for text on #DDEEF1 as contrast may be too low.
Use a WCAG contrast checker for all text and interactive elements to ensure compliance.

Recommended combinations

Deep Calm

Excellent for clear hero sections: light background, deep text/logo, and a mid-tone for supporting information.

#DDEEF1 · #2C4A51 · #75A5AD

Misty Layers

Create a sense of depth and hierarchy in layered UI components or data visualizations.

#A9CCD2 · #75A5AD · #4E7B82

Grounded Serenity

Ideal for background gradients or section breaks that transition smoothly from light to dark.

#DDEEF1 · #4E7B82 · #A9CCD2

CSS variables

:root {
  --coastal-morning-fog-1: #DDEEF1;
  --coastal-morning-fog-2: #A9CCD2;
  --coastal-morning-fog-3: #75A5AD;
  --coastal-morning-fog-4: #4E7B82;
  --coastal-morning-fog-5: #2C4A51;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-morning-fog": {
        1: "#DDEEF1",
        2: "#A9CCD2",
        3: "#75A5AD",
        4: "#4E7B82",
        5: "#2C4A51",
      }
    }
  }
}

Hex values

Color 1#DDEEF1

Color 2#A9CCD2

Color 3#75A5AD

Color 4#4E7B82

Color 5#2C4A51

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

3.9:1AA18

8:1AAA

1.4:1Fail

1.6:1Fail

2.7:1Fail

5.6:1AA

2.3:1Fail

1.6:1Fail

1.7:1Fail

3.5:1AA18

3.9:1AA18

2.7:1Fail

1.7:1Fail

2:1Fail

8:1AAA

5.6:1AA

3.5:1AA18

2:1Fail

Similar palettes

More like Coastal Morning Fog

View all cool

Misty Coastal Cliffs

Mountain Fog Blanket

Aegean Coastline Calm

Agate Grotto

Azure Coastline Calm

Cloud Forest Mist