Colour cheat sheet

Neutrals, the roles a palette needs, and giving every colour a job.

WCAGSGDSAppleGOV.UK3 rules, updated 7 Oct 2026Verified 7 Oct 2026

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

Neutrals

Safe starting point

Either is fine

Pure white and pure black

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Pure white and pure black are valid colours. Many product interfaces soften one or both, because large areas at maximum contrast can feel harsh.

Pure#000000
Softened#111111
Surface#171717
Raised surface#1F1F1F

Pure#FFFFFF
Softened#FAFAFA
Background#F8F8F8

Pure and softened neutrals. Neither is better in general: it depends on the brand, the screen and what sits on top.

Common range Dark text #111111–#1F1F1F, light backgrounds #F8F8F8–#FFFFFF

Why?

Softened neutrals lower glare on long sessions and leave room for a brighter white surface to sit on an off-white page.

When to deviate. Keep pure white where you need the most contrast you can get, such as small text or outdoor mobile use. Do not swap black for grey by habit.

Common mistakes (2)

Body text softened so far it fails contrast.
An off-white page with off-white cards, so the surfaces no longer separate.

Senior designer note“Contrast matters more than whether a hex code looks fashionable.”

Official guidanceWCAG

WCAG
Text needs at least 4.5:1 against its background, or 3:1 for large text.
WCAG 2.2, SC 1.4.3 Contrast (Minimum)(opens in a new tab)Standard requirement

Roles

The roles a palette needs

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Most product palettes come down to the same few jobs. Name colours by the job, not the hue.

Background: The page. The lowest layer everything sits on.
Surface: Cards and panels. One step apart from the background, lighter or darker.
Elevated surface: Menus and dialogs. Sits above surfaces; often the lightest neutral plus a shadow.
Border: Edges and dividers. Visible, but quieter than text.
Primary text: Main content. The highest-contrast text colour.
Secondary text: Supporting content. Quieter, and still passing contrast.
Disabled text: Unavailable. Clearly inactive; used rarely.
Semantic: Status. Error, warning, success and information, each used for that meaning only.

Why?

Role names survive a rebrand or a dark theme; hue names do not.

Official guidanceSGDSAppleGOV.UK

SGDS
Use the same colour for the same role across the interface.
SGDS, Colour(opens in a new tab)Design-system convention
Apple
Do not redefine a semantic colour's meaning, such as using the separator colour for text.
Apple HIG, Color(opens in a new tab)Design-system convention
GOV.UK
Only use a functional colour in the context it was designed for.
GOV.UK Design System, Colour(opens in a new tab)Design-system convention

Colour should have a job

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

For each colour on the screen, ask why it is there. Good answers: hierarchy, status, action, branding, grouping, feedback.

Why?

Colour is the strongest signal you have. Spent on decoration, it is no longer available to mean something.

Common mistakes (3)

An accent colour on things that are not interactive.
Red used for both errors and a brand highlight.
The only answer is: because it looked nice.

Senior designer note“If you cannot say what a colour is for, try the screen without it.”

Official guidanceWCAG

WCAG
Colour must not be the only way information is conveyed.
WCAG 2.2, SC 1.4.1 Use of Color(opens in a new tab)Standard requirement

Neutrals

Safe starting point

Either is fine

Pure white and pure black

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Pure white and pure black are valid colours. Many product interfaces soften one or both, because large areas at maximum contrast can feel harsh.

Pure#000000
Softened#111111
Surface#171717
Raised surface#1F1F1F

Pure#FFFFFF
Softened#FAFAFA
Background#F8F8F8

Pure and softened neutrals. Neither is better in general: it depends on the brand, the screen and what sits on top.

Common range Dark text #111111–#1F1F1F, light backgrounds #F8F8F8–#FFFFFF

Why?

Softened neutrals lower glare on long sessions and leave room for a brighter white surface to sit on an off-white page.

When to deviate. Keep pure white where you need the most contrast you can get, such as small text or outdoor mobile use. Do not swap black for grey by habit.

Common mistakes (2)

Body text softened so far it fails contrast.
An off-white page with off-white cards, so the surfaces no longer separate.

Senior designer note“Contrast matters more than whether a hex code looks fashionable.”

Official guidanceWCAG

WCAG
Text needs at least 4.5:1 against its background, or 3:1 for large text.
WCAG 2.2, SC 1.4.3 Contrast (Minimum)(opens in a new tab)Standard requirement

Roles

The roles a palette needs

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Most product palettes come down to the same few jobs. Name colours by the job, not the hue.

Background: The page. The lowest layer everything sits on.
Surface: Cards and panels. One step apart from the background, lighter or darker.
Elevated surface: Menus and dialogs. Sits above surfaces; often the lightest neutral plus a shadow.
Border: Edges and dividers. Visible, but quieter than text.
Primary text: Main content. The highest-contrast text colour.
Secondary text: Supporting content. Quieter, and still passing contrast.
Disabled text: Unavailable. Clearly inactive; used rarely.
Semantic: Status. Error, warning, success and information, each used for that meaning only.

Why?

Role names survive a rebrand or a dark theme; hue names do not.

Official guidanceSGDSAppleGOV.UK

SGDS
Use the same colour for the same role across the interface.
SGDS, Colour(opens in a new tab)Design-system convention
Apple
Do not redefine a semantic colour's meaning, such as using the separator colour for text.
Apple HIG, Color(opens in a new tab)Design-system convention
GOV.UK
Only use a functional colour in the context it was designed for.
GOV.UK Design System, Colour(opens in a new tab)Design-system convention

Colour should have a job

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

For each colour on the screen, ask why it is there. Good answers: hierarchy, status, action, branding, grouping, feedback.

Why?

Colour is the strongest signal you have. Spent on decoration, it is no longer available to mean something.

Common mistakes (3)

An accent colour on things that are not interactive.
Red used for both errors and a brand highlight.
The only answer is: because it looked nice.

Senior designer note“If you cannot say what a colour is for, try the screen without it.”

Official guidanceWCAG

WCAG
Colour must not be the only way information is conveyed.
WCAG 2.2, SC 1.4.1 Use of Color(opens in a new tab)Standard requirement

Colour cheat sheet

Filters

Neutrals

Pure white and pure black

Roles

The roles a palette needs

Colour should have a job

Colour cheat sheet

Filters

Neutrals

Pure white and pure black

Roles

The roles a palette needs

Colour should have a job