color-mix() Read the spec (L5)
Blend two colors in any color space at any ratio. The mixing color space dramatically affects the result — the same percentages produce different colors in sRGB vs. oklch vs. lab.
Relative Colors Read the spec (L5)
Decompose a color into its channels, then manipulate them with calc(). Pick a base color, choose a color function, and adjust individual channels to see palettes emerge in real time.
Color Spaces Read the spec (L4)
Not all color spaces are created equal. See how perceptual uniformity — or lack thereof — affects lightness ramps, gradients, and palette generation. This is the "why" behind oklch and oklab.
light-dark() Read the spec (L5)
A function that resolves to one of two colors based on the used color-scheme. Define both variants in one declaration — no media queries needed.
Choose the text color for each scheme — light mode typically uses a dark color, and dark mode a light one.
Preview Card
This card uses light-dark() for its text color, adapting automatically to the active color scheme.