Styles
STYLES / RUNTIME COLOUR

Colour Lab

Start with a colour. Watch every component respond.

Theming guide ↗

01 Choose your source

Pick a colour, or try one of our favourites.

H 299 · C 48 · T 40Images stay in your browser.

02 Set the mood

Preview mode
Standard · 0.00
Contrast presets
−1.0 Reduced+1.0 High

Live preview

Tonal spot · Light

A colour for every message

Live normal-text contrast

Your experiments affect this preview. Contrast labels describe each status text/background pair.

Role inspectorEvery colour, down to the token40 roles
Copy swatches as

Primary

Secondary

Tertiary

Neutral / surface

Outline / utility

Error

Status

Take it into your appCopy the current scheme as JavaScript or CSS

These snippets apply the scheme to your app’s root. Pass a container to applyScheme to scope it, as this preview does.