Palette

Morning Fog Harbor

Muted, cool grays and blues that capture the atmospheric quiet of a misty morning over a still harbor.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D1D8DB#A8B1B5#7B878C#525E62#2B363A

Palette guide

How to use Morning Fog Harbor

Overview

The "Morning Fog Harbor" palette evokes the atmospheric quiet of a misty morning over a still harbor, with its deep, cool grays and blues. Featuring #D1D8DB (Light Grey Blue), #A8B1B5 (Muted Blue Grey), #7B878C (Cadet Grey), #525E62 (Dark Blue Grey), and #2B363A (Very Dark Blue Grey), this collection offers a sophisticated and grounded aesthetic. Designers can leverage these profound hues to create serious, elegant interfaces, maritime-inspired branding, or any project requiring a calm, mature, and robust visual presence. It's an excellent choice for conveying stability, depth, and quiet authority.

Best used for

Nautical or maritime-themed brands
High-end corporate websites
Photography or art galleries
Luxury automotive interfaces
Financial services or consulting platforms
Environmental conservation organizations

Suggested color roles

primary

#D1D8DB - A light, cool grey-blue, ideal for expansive backgrounds or as a clean, serene canvas.

secondary

#A8B1B5 - A muted blue-grey, excellent for secondary backgrounds, content cards, or subtle section headers.

accent

#2B363A - The deepest, almost-black blue-grey, perfect for strong calls-to-action, primary text, or bold interactive elements.

background

#7B878C - A solid cadet grey, offering a stable and mature backdrop for main content blocks.

text

#525E62 - A dark blue-grey, highly suitable for body text on lighter backgrounds like #D1D8DB and #A8B1B5, ensuring excellent readability.

Accessibility notes

#2B363A and #525E62 provide excellent contrast for text on #D1D8DB and #A8B1B5.
Ensure sufficient contrast when using #7B878C for text on #A8B1B5; always verify.
This palette offers a good range from light to dark, making high contrast easier to achieve.
Interactive elements should clearly define their states, especially when using adjacent mid-tones.

Recommended combinations

Harbor Mist

#D1D8DB as main background, #A8B1B5 for content cards, and #7B878C for headers or sidebars.

#D1D8DB · #A8B1B5 · #7B878C

Deep Waters

#D1D8DB as a light canvas, #2B363A for strong headings/buttons, and #525E62 for body text.

#D1D8DB · #2B363A · #525E62

Anchored Tones

#A8B1B5 for background, #7B878C for sub-elements, and #525E62 for primary text or icons.

#A8B1B5 · #7B878C · #525E62

CSS variables

:root {
  --morning-fog-harbor-1: #D1D8DB;
  --morning-fog-harbor-2: #A8B1B5;
  --morning-fog-harbor-3: #7B878C;
  --morning-fog-harbor-4: #525E62;
  --morning-fog-harbor-5: #2B363A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog-harbor": {
        1: "#D1D8DB",
        2: "#A8B1B5",
        3: "#7B878C",
        4: "#525E62",
        5: "#2B363A",
      }
    }
  }
}

Hex values

Color 1#D1D8DB

Color 2#A8B1B5

Color 3#7B878C

Color 4#525E62

Color 5#2B363A

Accessibility

Contrast checker

1.5:1Fail

2.6:1Fail

4.6:1AA

8.6:1AAA

1.5:1Fail

1.7:1Fail

3.1:1AA18

5.7:1AA

2.6:1Fail

1.7:1Fail

1.8:1Fail

3.4:1AA18