Color Palettes

This CSS library uses oklch() to calculate all colors from a single base color, defined by --color. The system generates lightness-adjusted text and surface swatches using --text-lc-* and --surface-lc-* values, which adapt to light and dark modes automatically. These are used with cur-color() to derive accessible contrast values.

Light Mode

text-lc-1
surface-lc-1
text-lc-2
surface-lc-2
text-lc-3
surface-lc-3
text-lc-4
surface-lc-4
text-lc-5
surface-lc-5
text-lc-6
surface-lc-6
text-lc-7
surface-lc-7
text-lc-8
surface-lc-8
text-lc-9
surface-lc-9

Dark Mode

text-lc-1
surface-lc-1
text-lc-2
surface-lc-2
text-lc-3
surface-lc-3
text-lc-4
surface-lc-4
text-lc-5
surface-lc-5
text-lc-6
surface-lc-6
text-lc-7
surface-lc-7
text-lc-8
surface-lc-8
text-lc-9
surface-lc-9

Light Mode

text-lc-1
surface-lc-1
text-lc-2
surface-lc-2
text-lc-3
surface-lc-3
text-lc-4
surface-lc-4
text-lc-5
surface-lc-5
text-lc-6
surface-lc-6
text-lc-7
surface-lc-7
text-lc-8
surface-lc-8
text-lc-9
surface-lc-9

Dark Mode

text-lc-1
surface-lc-1
text-lc-2
surface-lc-2
text-lc-3
surface-lc-3
text-lc-4
surface-lc-4
text-lc-5
surface-lc-5
text-lc-6
surface-lc-6
text-lc-7
surface-lc-7
text-lc-8
surface-lc-8
text-lc-9
surface-lc-9

Light Mode

text-lc-1
surface-lc-1
text-lc-2
surface-lc-2
text-lc-3
surface-lc-3
text-lc-4
surface-lc-4
text-lc-5
surface-lc-5
text-lc-6
surface-lc-6
text-lc-7
surface-lc-7
text-lc-8
surface-lc-8
text-lc-9
surface-lc-9

Dark Mode

text-lc-1
surface-lc-1
text-lc-2
surface-lc-2
text-lc-3
surface-lc-3
text-lc-4
surface-lc-4
text-lc-5
surface-lc-5
text-lc-6
surface-lc-6
text-lc-7
surface-lc-7
text-lc-8
surface-lc-8
text-lc-9
surface-lc-9