Color

Literal

Hue	Core	90	80	70	60	50	40	30	20	10
Gray
Red
Yellow
Green
Cyan
Blue
Indigo
Pink

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-10)). E.g. to get blue 70 you would use oklch(from var(--color-blue) var(--tint-70)).

Background/Border pairs

Hue	100 / core	90 / 100	90 / 80	90 / 70	80 / 60	60 / 40
Gray
Red
Yellow
Green
Cyan
Blue
Indigo
Pink

Text color

Hue	Core	90	80	70	60	50	40	30	20	10
Gray	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
Red	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
Yellow	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
Green	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
Cyan	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
Blue	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
Indigo	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
Pink	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa

color: oklch(from var(--color-blue) var(--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.

Hue	Core	90	80	70	60	50	40	30	20	10
Base
Accent
Core