Colours
Brand palette, semantic tokens, and colour usage guidelines across light and dark modes.
Primitive Palettes
9 colour ramps from Tailwind's palette, each with 11 stops from 50 (lightest) to 950 (darkest). Click any hex value to copy.
slate
50
100
200
300
400
500
600
700
800
900
950
gray
50
100
200
300
400
500
600
700
800
900
950
zinc
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
sky
50
100
200
300
400
500
600
700
800
900
950
green
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950
red
50
100
200
300
400
500
600
700
800
900
950
rose
50
100
200
300
400
500
600
700
800
900
950
Semantic Colour Tokens
Purpose-based colour aliases that automatically adapt between light and dark modes. These are the tokens you should use in components.
Background
Text
Border
State Layer
Alpha Tokens
Semi-transparent white and slate overlays for state layers, borders, and subtle backgrounds. Shown on both light and dark surfaces.
On dark surface
white/8
white/12
white/16
white/20
slate-900/8
slate-900/12
slate-950/8
slate-950/12
On light surface
white/8rgba(255,255,255,0.08)
white/12rgba(255,255,255,0.12)
white/16rgba(255,255,255,0.16)
white/20rgba(255,255,255,0.20)
slate-900/8rgba(15,23,42,0.08)
slate-900/12rgba(15,23,42,0.12)
slate-950/8rgba(2,6,23,0.08)
slate-950/12rgba(2,6,23,0.12)