Anchit Verma

TIL: CSS color-mix() is production-ready

css web

color-mix() has full browser support now and it’s incredibly useful for generating color variations without preprocessors.

/* 50% of accent color mixed with transparent = semi-transparent accent */
background: color-mix(in srgb, var(--color-accent) 50%, transparent);

/* Darken a color by mixing with black */
border-color: color-mix(in srgb, var(--color-accent) 80%, black);

The in srgb part specifies the color space for interpolation. You can also use in oklch for perceptually uniform mixing, which tends to produce more natural-looking results.

I’ve been using this all over this site instead of maintaining separate color tokens for every opacity variant.