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.
contrast-color() Read the spec (L5)
Automatically picks the highest-contrast text color — white or black — against any background. Uses WCAG 2.0 relative luminance. No math required in your CSS.
white nor black achieves WCAG AAA (7:1) contrast against this color. contrast-color() returns the better option and will still pass AA (4.5:1), but enhanced accessibility requires a less mid-tone background.
WCAG AA requires 4.5:1 for normal text
Pure black or white text on a saturated background loses brand identity. Blending a small amount of the background color back in recovers the hue while maintaining readability.