Palette

Coastal Fog Mornings

Soft, ethereal greys that capture the quiet beauty of a misty morning by the coast.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C2C2C2#9A9A9A#E0E0E0#7D7D7D#B0B0B0

Palette guide

How to use Coastal Fog Mornings

Overview

The Coastal Fog Mornings palette offers a truly neutral and calming collection of grey tones, perfect for designs seeking understated elegance. Featuring a range from the light and airy #E0E0E0 to the grounding deep grey of #7D7D7D, with versatile mid-tones like #C2C2C2, #9A9A9A, and #B0B0B0. This palette is exceptionally useful for creating minimalist user interfaces, sophisticated branding, and serene visual content. Developers will appreciate its straightforward application for backgrounds, text, and subtle UI elements where a clean, professional, and timeless aesthetic is desired. It's an excellent choice for projects that aim for a quiet, refined, and adaptable visual presence.

Best used for

Minimalist user interfaces
Sophisticated brand identities
Black and white photography showcases
Editorial layouts with clean aesthetics
Modern interior design concepts
Subtle web design backgrounds

Suggested color roles

primary

Utilize #9A9A9A as a robust mid-tone for main content areas, large text blocks, or primary interactive elements.

secondary

Employ #B0B0B0 for secondary text, borders, or background divisions to add gentle structure without heavy contrast.

accent

Apply #7D7D7D sparingly for strong text, important icons, or calls-to-action that require clear emphasis within the neutral scheme.

background

The lightest shade, #E0E0E0, is ideal for expansive backgrounds, providing a clean and ethereal canvas for all content.

text

For optimal readability on lighter backgrounds, use #7D7D7D or a darker charcoal like #333333 to ensure clear text presentation.

Accessibility notes

Ensure #7D7D7D text has sufficient contrast against #E0E0E0 or #C2C2C2 backgrounds.
Avoid using #B0B0B0 text on #C2C2C2 backgrounds, as contrast may be too low for readability.
Verify all text and interactive elements meet WCAG contrast guidelines.
Consider a high-contrast theme option for better accessibility, given the palette's subtle nature.

Recommended combinations

Clean Base

Perfect for main body content: light background, dark text, and a mid-tone for headings or secondary information.

#E0E0E0 · #7D7D7D · #9A9A9A

Layered Greys

Create subtle depth and hierarchy in UI elements, cards, or layered content sections.

#C2C2C2 · #B0B0B0 · #9A9A9A

Subtle Depth

Use for a clean background, a slightly darker hover state, and a robust text or icon color.

#E0E0E0 · #C2C2C2 · #7D7D7D

CSS variables

:root {
  --coastal-fog-mornings-1: #C2C2C2;
  --coastal-fog-mornings-2: #9A9A9A;
  --coastal-fog-mornings-3: #E0E0E0;
  --coastal-fog-mornings-4: #7D7D7D;
  --coastal-fog-mornings-5: #B0B0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-fog-mornings": {
        1: "#C2C2C2",
        2: "#9A9A9A",
        3: "#E0E0E0",
        4: "#7D7D7D",
        5: "#B0B0B0",
      }
    }
  }
}

Hex values

Color 1#C2C2C2

Color 2#9A9A9A

Color 3#E0E0E0

Color 4#7D7D7D

Color 5#B0B0B0

Accessibility

Contrast checker

1.6:1Fail

1.3:1Fail

2.3:1Fail

1.2:1Fail

1.6:1Fail

2.1:1Fail

1.5:1Fail

1.3:1Fail

2.1:1Fail

3.1:1AA18

1.6:1Fail

2.3:1Fail

1.5:1Fail

3.1:1AA18

1.9:1Fail

1.2:1Fail

1.3:1Fail

1.6:1Fail

1.9:1Fail

Similar palettes

More like Coastal Fog Mornings

Petrichor Ground Mist

Coastal Fog Mornings

See it in context.

Ready when you are.

Built with Coastal Fog Mornings.

How to use Coastal Fog Mornings

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Clean Base

Layered Greys

Subtle Depth

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Fog Mornings