Harbour Fog

Cool grey-blue haze over deep water: quiet, trustworthy and easy on the eyes, with a steady sea-blue for actions.

cool
calm
serious

The colours

Each colour has one job. The mock layout uses only pairs that pass AA, and the list shows every pair that is readable, measured rather than guessed.

Morning Hazebackground #eef3f7
Sail Whitesurface #ffffff
Deep Watertext #14232f
Wet Slatemuted #4b5e6e
Channel Blueaccent #1d5a92
Kelp Tealaccent-2 #2f6f6f
Mist Lineborder #c8d5e0

Sample page

A page in Harbour Fog

Every word here is drawn in this palette's own colours, using only pairs that pass AA.

Main action

A card on the surface

Secondary details sit a step quieter than the main text.

A small mock layout drawn in the Harbour Fog colours.

Accessible pairs

AA pairs (4.5:1 or more) suit body text; AA large pairs (3:1 or more) are for text 24px and larger.

Deep Water on Sail White16.0:1 (AA)
Sail White on Deep Water16.0:1 (AA)
Deep Water on Morning Haze14.3:1 (AA)
Morning Haze on Deep Water14.3:1 (AA)
Deep Water on Mist Line10.7:1 (AA)
Mist Line on Deep Water10.7:1 (AA)
Channel Blue on Sail White7.2:1 (AA)
Sail White on Channel Blue7.2:1 (AA)
Sail White on Wet Slate6.7:1 (AA)
Wet Slate on Sail White6.7:1 (AA)
Channel Blue on Morning Haze6.4:1 (AA)
Morning Haze on Channel Blue6.4:1 (AA)
Morning Haze on Wet Slate6.0:1 (AA)
Wet Slate on Morning Haze6.0:1 (AA)
Kelp Teal on Sail White5.8:1 (AA)
Sail White on Kelp Teal5.8:1 (AA)
Kelp Teal on Morning Haze5.2:1 (AA)
Morning Haze on Kelp Teal5.2:1 (AA)
Channel Blue on Mist Line4.8:1 (AA)
Mist Line on Channel Blue4.8:1 (AA)
Mist Line on Wet Slate4.5:1 (AA large)
Wet Slate on Mist Line4.5:1 (AA large)
Kelp Teal on Mist Line3.9:1 (AA large)
Mist Line on Kelp Teal3.9:1 (AA large)

Copy the idea

The Harbour Fog recipe — its idea, colours, accessible pairs and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Harbour Fog — palette recipe

## The idea
- Cool grey-blue haze over deep water: quiet, trustworthy and easy on the eyes, with a steady sea-blue for actions.

## Use it for
- Software and service dashboards
- Health and finance information
- Help centres and documentation

## Avoid it when
- The brand should feel warm, festive or handmade
- You need strong emotional energy

## Colours
- Morning Haze (background): #eef3f7
- Sail White (surface): #ffffff
- Deep Water (text): #14232f
- Wet Slate (muted): #4b5e6e
- Channel Blue (accent): #1d5a92
- Kelp Teal (accent-2): #2f6f6f
- Mist Line (border): #c8d5e0

## Accessible pairs
- Deep Water on Sail White — 16.0:1 (AA)
- Sail White on Deep Water — 16.0:1 (AA)
- Deep Water on Morning Haze — 14.3:1 (AA)
- Morning Haze on Deep Water — 14.3:1 (AA)
- Deep Water on Mist Line — 10.7:1 (AA)
- Mist Line on Deep Water — 10.7:1 (AA)
- Channel Blue on Sail White — 7.2:1 (AA)
- Sail White on Channel Blue — 7.2:1 (AA)
- Sail White on Wet Slate — 6.7:1 (AA)
- Wet Slate on Sail White — 6.7:1 (AA)
- Channel Blue on Morning Haze — 6.4:1 (AA)
- Morning Haze on Channel Blue — 6.4:1 (AA)
- Morning Haze on Wet Slate — 6.0:1 (AA)
- Wet Slate on Morning Haze — 6.0:1 (AA)
- Kelp Teal on Sail White — 5.8:1 (AA)
- Sail White on Kelp Teal — 5.8:1 (AA)
- Kelp Teal on Morning Haze — 5.2:1 (AA)
- Morning Haze on Kelp Teal — 5.2:1 (AA)
- Channel Blue on Mist Line — 4.8:1 (AA)
- Mist Line on Channel Blue — 4.8:1 (AA)
- Mist Line on Wet Slate — 4.5:1 (AA large)
- Wet Slate on Mist Line — 4.5:1 (AA large)
- Kelp Teal on Mist Line — 3.9:1 (AA large)
- Mist Line on Kelp Teal — 3.9:1 (AA large)

## Principles
- Use the haze as the page and sail white for anything the user works inside.
- Keep channel blue for buttons and links so the eye learns where actions live.
- Use kelp teal only for a second kind of signal, such as tags or progress.
- Lean on wet slate for secondary details instead of shrinking text.
- Keep borders light; spacing should do most of the grouping.

Design with the "Harbour Fog" palette.
The idea: Cool grey-blue haze over deep water: quiet, trustworthy and easy on the eyes, with a steady sea-blue for actions.
It suits: Software and service dashboards.
It suits: Health and finance information.
It suits: Help centres and documentation.
Do not choose it when: The brand should feel warm, festive or handmade.
Do not choose it when: You need strong emotional energy.
Use #eef3f7 (Morning Haze) as the background colour.
Use #ffffff (Sail White) as the surface colour.
Use #14232f (Deep Water) as the text colour.
Use #4b5e6e (Wet Slate) as the muted colour.
Use #1d5a92 (Channel Blue) as the accent colour.
Use #2f6f6f (Kelp Teal) as the accent-2 colour.
Use #c8d5e0 (Mist Line) as the border colour.
Set body text only in pairs marked AA (at least 4.5:1); pairs marked AA large (at least 3:1) are for text 24px and larger.
Pair: Deep Water on Sail White — 16.0:1 (AA).
Pair: Sail White on Deep Water — 16.0:1 (AA).
Pair: Deep Water on Morning Haze — 14.3:1 (AA).
Pair: Morning Haze on Deep Water — 14.3:1 (AA).
Pair: Deep Water on Mist Line — 10.7:1 (AA).
Pair: Mist Line on Deep Water — 10.7:1 (AA).
Pair: Channel Blue on Sail White — 7.2:1 (AA).
Pair: Sail White on Channel Blue — 7.2:1 (AA).
Pair: Sail White on Wet Slate — 6.7:1 (AA).
Pair: Wet Slate on Sail White — 6.7:1 (AA).
Pair: Channel Blue on Morning Haze — 6.4:1 (AA).
Pair: Morning Haze on Channel Blue — 6.4:1 (AA).
Pair: Morning Haze on Wet Slate — 6.0:1 (AA).
Pair: Wet Slate on Morning Haze — 6.0:1 (AA).
Pair: Kelp Teal on Sail White — 5.8:1 (AA).
Pair: Sail White on Kelp Teal — 5.8:1 (AA).
Pair: Kelp Teal on Morning Haze — 5.2:1 (AA).
Pair: Morning Haze on Kelp Teal — 5.2:1 (AA).
Pair: Channel Blue on Mist Line — 4.8:1 (AA).
Pair: Mist Line on Channel Blue — 4.8:1 (AA).
Pair: Mist Line on Wet Slate — 4.5:1 (AA large).
Pair: Wet Slate on Mist Line — 4.5:1 (AA large).
Pair: Kelp Teal on Mist Line — 3.9:1 (AA large).
Pair: Mist Line on Kelp Teal — 3.9:1 (AA large).
Follow this rule: Use the haze as the page and sail white for anything the user works inside.
Follow this rule: Keep channel blue for buttons and links so the eye learns where actions live.
Follow this rule: Use kelp teal only for a second kind of signal, such as tags or progress.
Follow this rule: Lean on wet slate for secondary details instead of shrinking text.
Follow this rule: Keep borders light; spacing should do most of the grouping.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #eef3f7;
  --color-surface: #ffffff;
  --color-text: #14232f;
  --color-muted: #4b5e6e;
  --color-accent: #1d5a92;
  --color-accent-2: #2f6f6f;
  --color-border: #c8d5e0;
}

Download brief (.md)

Where it fits

Use it for

Software and service dashboards
Health and finance information
Help centres and documentation

Avoid it when

The brand should feel warm, festive or handmade
You need strong emotional energy

Principles

Use the haze as the page and sail white for anything the user works inside.
Keep channel blue for buttons and links so the eye learns where actions live.
Use kelp teal only for a second kind of signal, such as tags or progress.
Lean on wet slate for secondary details instead of shrinking text.
Keep borders light; spacing should do most of the grouping.

Back to all palettes