color

CSS design_tokens/color.css

LCH colors
All colors with the same value have the same perceived contrast.
This helps ensuring contrast is WCAG compliant. Any color with value 500 (and more) meets AA guidelines for text, with a contrast > 4.5:1.

Light / dark mode
By default, the theme is set to respect system preferences if available. It will automatically switch to dark mode using prefers-color-scheme: dark. You may use the theme switcher component (shown in the banner of this page).

bg = grey-20
body = grey-500
black
colors -500
blue AA
cyan AA
green AA
yellow AA
orange AA
red AA
fushia AA
purple AA
grey AA
grey
00
20
35
50
100
200
300
400
500 AA
600 AA
700 AAA
800 AAA
900 AAA
blue
00
20
35
50
100
200
300
400
500 AA
600 AA
700 AAA
800 AAA
900 AAA
green
00
20
35
50
100
200
300
400
500 AA
600 AA
700 AAA
800 AAA
900 AAA
red
00
20
35
50
100
200
300
400
500 AA
600 AA
700 AAA
800 AAA
900 AAA
yellow
00
20
35
50
100
200
300
400
500 AA
600 AA
700 AAA
800 AAA
900 AAA