color

CSS design_tokens/color.css

OKLCH 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).

colors -500
info AA
cyan AA
success AA
warning AA
orange AA
danger AA
fushia AA
purple AA
grey AA
--color-grey-
00
20
35
50
100
200
300
400
500 AA
600 AA
700 AAA
800 AAA
900 AAA
--color-info-
50
100
200
400
500 AA
600 AA
700 AAA
--color-success-
50
100
200
400
500 AA
600 AA
700 AAA
--color-danger-
50
100
200
400
500 AA
600 AA
700 AAA
--color-warning-
50
100
200
400
500 AA
600 AA
700 AAA