CSS has evolved far beyond rgb() and hsl(). Modern color functions let you work in perceptually uniform color spaces, mix colors natively, derive new colors from existing ones, and access wide-gamut displays -- all without JavaScript.
Pick two colors and adjust the mix ratio. The result simulates color-mix(in srgb, ...) in your browser.
Mixes two colors together in a given color space. You can control the proportion of each color. Supported color spaces include srgb, srgb-linear, lab, oklch, and more.
color-mix(in <colorspace>, <color1> [<percentage>], <color2> [<percentage>])Chrome 111+, Firefox 113+, Safari 16.2+
Defines a color in the OKLCH color space -- a perceptually uniform space with Lightness (0-1), Chroma (0-0.4), and Hue (0-360). Ideal for creating palettes where perceived lightness is consistent across hues.
oklch(L C H [/ alpha])Chrome 111+, Firefox 113+, Safari 15.4+
Defines a color in the CIE LCH color space. Lightness (0-100), Chroma (0-150+), and Hue (0-360). Similar to OKLCH but uses the CIE LAB model which has slight perceptual non-uniformities in blues and purples.
lch(L C H [/ alpha])Chrome 111+, Firefox 113+, Safari 15.4+
Defines a color in the CIE LAB color space. Lightness (0-100), a-axis (green-red, roughly -125 to 125), b-axis (blue-yellow, roughly -125 to 125). Covers the full gamut of human vision.
lab(L a b [/ alpha])Chrome 111+, Firefox 113+, Safari 15.4+
Specifies a color in a predefined color space such as display-p3, a98-rgb, prophoto-rgb, or rec2020. Enables access to wider-gamut colors beyond sRGB.
color(<colorspace> R G B [/ alpha])Chrome 111+, Firefox 113+, Safari 15.4+
Derives a new color from an existing one by modifying individual components. Works with any color function (rgb, hsl, oklch, lab, etc.). Enables powerful theme manipulation like lightening, desaturating, or shifting hue without JavaScript.
<function>(from <origin-color> <components>)Chrome 122+, Firefox 128+, Safari 16.4+