Palette

Coastal Fog

A serene blend of muted blues and greys, like a quiet morning where the land meets the sea in a soft haze.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CBD9DF#A2B5BF#768D9C#4B6171#2D3A46

Palette guide

How to use Coastal Fog

Overview

The Coastal Fog palette offers a sophisticated blend of deep and muted blues and greys, evoking the serene yet mysterious atmosphere of a foggy coastline. Ranging from the light blue-grey #CBD9DF to the profound #2D3A46, with versatile mid-tones like #A2B5BF, #768D9C, and #4B6171. This palette is perfect for designs that aim for a calm, professional, and grounded aesthetic. Developers will find these colors excellent for creating robust user interfaces, corporate branding, and immersive digital environments that convey depth and tranquility. It's an ideal choice for projects seeking a sophisticated, cool, and enduring visual identity.

Best used for

Corporate and professional branding
Sophisticated web and mobile applications
Dark mode theme options
Luxury product packaging
Maritime or nautical themed designs
Environmental and nature-focused content

Suggested color roles

primary

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

secondary

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

accent

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

background

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

text

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

Accessibility notes

Ensure #2D3A46 text has excellent contrast against #CBD9DF or #A2B5BF backgrounds.
Check contrast for #768D9C text on #CBD9DF; it should be sufficient but verify.
Avoid using #A2B5BF for text on #CBD9DF as contrast may be too low.
Use a WCAG contrast checker for all text and interactive elements to ensure compliance.

Recommended combinations

Deep Contrast

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

#CBD9DF · #2D3A46 · #768D9C

Gradual Depth

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

#A2B5BF · #768D9C · #4B6171

Misty Layers

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

#CBD9DF · #A2B5BF · #4B6171

CSS variables

:root {
  --coastal-fog-1: #CBD9DF;
  --coastal-fog-2: #A2B5BF;
  --coastal-fog-3: #768D9C;
  --coastal-fog-4: #4B6171;
  --coastal-fog-5: #2D3A46;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog": {
        1: "#CBD9DF",
        2: "#A2B5BF",
        3: "#768D9C",
        4: "#4B6171",
        5: "#2D3A46",
      }
    }
  }
}

Hex values

Color 1#CBD9DF

Color 2#A2B5BF

Color 3#768D9C

Color 4#4B6171

Color 5#2D3A46

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

4.5:1AA18

8:1AAA

1.5:1Fail

1.6:1Fail

3:1AA18

5.5:1AA

2.4:1Fail

1.6:1Fail

1.9:1Fail

3.4:1AA18

4.5:1AA18

3:1AA18

1.9:1Fail

1.8:1Fail

8:1AAA

5.5:1AA

3.4:1AA18

1.8:1Fail

Similar palettes

More like Coastal Fog

Coastal Seafoam Spray

Frosted Woodland Serene