Harbour fog

Grey-blue morning air over still water: cool, quiet and trustworthy, with a single deep sea blue that tells people where to act.

cool
calm
serious

The colours

7 colours, each with a role, then the palette at work on a small page.

Morning mistbackground#eef3f6
Sail whitesurface#ffffff
Deep harbourtext#1b2a35
Wet slatemuted#4c5f6d
Sea blueaccent#1f5d88
Shallow wateraccent-2#cde2ee
Rope greyborder#c7d4dd

Text on background: 13.14:1 — passes AA

Spring open days

A garden worth the walk

Paths, ponds and a glasshouse full of ferns, open every weekend from April to June.

Plan a visit

New

The late tulip border

Two hundred bulbs, planted by volunteers last autumn.

A made-up page in this palette. Every text colour reaches at least 4.5:1 on its background; the heading, at 28px, may use a 3:1 pair.

Copy the idea

Take the palette with you as a brief for a person, as instructions for an AI assistant, or as design tokens: the colours, their roles and the pairs that are safe for text.

# Harbour fog — palette recipe

## The idea

- Grey-blue morning air over still water: cool, quiet and trustworthy, with a single deep sea blue that tells people where to act.
- Mood: cool, calm, serious

## Use it for

- Health and care services
- Finance and insurance tools
- Public information sites

## Avoid it when

- The brand needs energy or playfulness
- The audience expects warmth above trust

## Colours

- Morning mist (background): #eef3f6
- Sail white (surface): #ffffff
- Deep harbour (text): #1b2a35
- Wet slate (muted): #4c5f6d
- Sea blue (accent): #1f5d88
- Shallow water (accent-2): #cde2ee
- Rope grey (border): #c7d4dd

## Accessible pairs

- Deep harbour on Sail white — 14.7:1 (AA)
- Sail white on Deep harbour — 14.7:1 (AA)
- Deep harbour on Morning mist — 13.1:1 (AA)
- Morning mist on Deep harbour — 13.1:1 (AA)
- Deep harbour on Shallow water — 11.0:1 (AA)
- Shallow water on Deep harbour — 11.0:1 (AA)
- Deep harbour on Rope grey — 9.7:1 (AA)
- Rope grey on Deep harbour — 9.7:1 (AA)
- Sail white on Sea blue — 7.0:1 (AA)
- Sea blue on Sail white — 7.0:1 (AA)
- Sail white on Wet slate — 6.6:1 (AA)
- Wet slate on Sail white — 6.6:1 (AA)
- Morning mist on Sea blue — 6.3:1 (AA)
- Sea blue on Morning mist — 6.3:1 (AA)
- Morning mist on Wet slate — 5.9:1 (AA)
- Wet slate on Morning mist — 5.9:1 (AA)
- Sea blue on Shallow water — 5.3:1 (AA)
- Shallow water on Sea blue — 5.3:1 (AA)
- Shallow water on Wet slate — 5.0:1 (AA)
- Wet slate on Shallow water — 5.0:1 (AA)
- Rope grey on Sea blue — 4.7:1 (AA)
- Sea blue on Rope grey — 4.7:1 (AA)
- Rope grey on Wet slate — 4.4:1 (AA large)
- Wet slate on Rope grey — 4.4:1 (AA large)

## Principles

- Morning mist fills about 60% of the page and sail white about 25%, for cards and forms
- Use sea blue for primary buttons, links and focus rings only, about 5% of the page
- Shallow water marks tags and selected rows, with deep harbour text on it
- Wet slate carries labels, hints and secondary details
- Separate areas with rope grey lines or a change of surface, not heavy shadows

Design with the "Harbour fog" palette.

The idea: Grey-blue morning air over still water: cool, quiet and trustworthy, with a single deep sea blue that tells people where to act.
The mood: cool, calm, serious.

It suits:
- Health and care services
- Finance and insurance tools
- Public information sites
It is a poor fit when:
- The brand needs energy or playfulness
- The audience expects warmth above trust

Use these colours, each in its role:
- Morning mist (background): #eef3f6
- Sail white (surface): #ffffff
- Deep harbour (text): #1b2a35
- Wet slate (muted): #4c5f6d
- Sea blue (accent): #1f5d88
- Shallow water (accent-2): #cde2ee
- Rope grey (border): #c7d4dd

Set text only in these colour pairs (text on background); use the ones marked (AA large) only for text at least 24px, or 18.66px bold:
- Deep harbour on Sail white — 14.7:1 (AA)
- Sail white on Deep harbour — 14.7:1 (AA)
- Deep harbour on Morning mist — 13.1:1 (AA)
- Morning mist on Deep harbour — 13.1:1 (AA)
- Deep harbour on Shallow water — 11.0:1 (AA)
- Shallow water on Deep harbour — 11.0:1 (AA)
- Deep harbour on Rope grey — 9.7:1 (AA)
- Rope grey on Deep harbour — 9.7:1 (AA)
- Sail white on Sea blue — 7.0:1 (AA)
- Sea blue on Sail white — 7.0:1 (AA)
- Sail white on Wet slate — 6.6:1 (AA)
- Wet slate on Sail white — 6.6:1 (AA)
- Morning mist on Sea blue — 6.3:1 (AA)
- Sea blue on Morning mist — 6.3:1 (AA)
- Morning mist on Wet slate — 5.9:1 (AA)
- Wet slate on Morning mist — 5.9:1 (AA)
- Sea blue on Shallow water — 5.3:1 (AA)
- Shallow water on Sea blue — 5.3:1 (AA)
- Shallow water on Wet slate — 5.0:1 (AA)
- Wet slate on Shallow water — 5.0:1 (AA)
- Rope grey on Sea blue — 4.7:1 (AA)
- Sea blue on Rope grey — 4.7:1 (AA)
- Rope grey on Wet slate — 4.4:1 (AA large)
- Wet slate on Rope grey — 4.4:1 (AA large)

Follow these principles:
- Morning mist fills about 60% of the page and sail white about 25%, for cards and forms
- Use sea blue for primary buttons, links and focus rings only, about 5% of the page
- Shallow water marks tags and selected rows, with deep harbour text on it
- Wet slate carries labels, hints and secondary details
- Separate areas with rope grey lines or a change of surface, not heavy shadows

Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #eef3f6;
  --color-surface: #ffffff;
  --color-text: #1b2a35;
  --color-muted: #4c5f6d;
  --color-accent: #1f5d88;
  --color-accent-2: #cde2ee;
  --color-border: #c7d4dd;
}

Download brief (.md)

Accessible pairs

Every pair of colours that is readable as text, strongest first. AA pairs (4.5:1 or more) work at any size; AA large pairs (3:1 or more) only for text of 24px, or 18.66px bold.

Text on background	Contrast	Level
Deep harbour on Sail white	14.7:1	AA
Sail white on Deep harbour	14.7:1	AA
Deep harbour on Morning mist	13.1:1	AA
Morning mist on Deep harbour	13.1:1	AA
Deep harbour on Shallow water	11.0:1	AA
Shallow water on Deep harbour	11.0:1	AA
Deep harbour on Rope grey	9.7:1	AA
Rope grey on Deep harbour	9.7:1	AA
Sail white on Sea blue	7.0:1	AA
Sea blue on Sail white	7.0:1	AA
Sail white on Wet slate	6.6:1	AA
Wet slate on Sail white	6.6:1	AA
Morning mist on Sea blue	6.3:1	AA
Sea blue on Morning mist	6.3:1	AA
Morning mist on Wet slate	5.9:1	AA
Wet slate on Morning mist	5.9:1	AA
Sea blue on Shallow water	5.3:1	AA
Shallow water on Sea blue	5.3:1	AA
Shallow water on Wet slate	5.0:1	AA
Wet slate on Shallow water	5.0:1	AA
Rope grey on Sea blue	4.7:1	AA
Sea blue on Rope grey	4.7:1	AA
Rope grey on Wet slate	4.4:1	AA large
Wet slate on Rope grey	4.4:1	AA large

Where it fits

Use it for

Health and care services
Finance and insurance tools
Public information sites

Avoid it when

The brand needs energy or playfulness
The audience expects warmth above trust

Principles

How much of each colour to use, and where.

Morning mist fills about 60% of the page and sail white about 25%, for cards and forms
Use sea blue for primary buttons, links and focus rings only, about 5% of the page
Shallow water marks tags and selected rows, with deep harbour text on it
Wet slate carries labels, hints and secondary details
Separate areas with rope grey lines or a change of surface, not heavy shadows