Color

Literal

Tint	Gray	Red	Yellow	Green	Cyan	Blue	Indigo	Pink
Core
95
90
85
80
75
70
65
60
55
50
45
40
35
30
25
20
15
10
5

To access a tint you use two variables in oklch(): the core color (e.g. var(--color-blue)) and the tint (e.g. var(--tint-15)). E.g. to get blue 75 you would use oklch(from var(--color-blue) var(--tint-75)).

Background/Border pairs

Pair	Gray	Red	Yellow	Green	Cyan	Blue	Indigo	Pink
100 / core
95 / 90
95 / 85
95 / 75
90 / 85
90 / 80
90 / 75

Text color

Tint	Gray	Red	Yellow	Green	Cyan	Blue	Indigo	Pink
Core	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
95	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
90	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
85	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
80	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
75	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
70	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
65	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
60	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
55	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
50	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
45	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
40	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
35	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
30	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
25	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
20	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
15	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
10	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
5	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa

color: oklch(from var(--color-blue) var(--tint-text));

Semantic

These colors are aliases of certain literal colors, based on their role. These are the root defaults, but they can be aliased to other colors on different elements/states.

Tint	Base	Accent	Core
Core
95
90
85
80
75
70
65
60
55
50
45
40
35
30
25
20
15
10
5