Mix two CSS colors in any interpolation space (oklch, lab, hsl, srgb, hwb, lch, oklab, srgb-linear) with adjustable percentage and hue interpolation method — emits modern, copy-ready color-mix() CSS.
Type any CSS color (named, hex, rgb, hsl, oklch, lab, currentColor…). The picker is a convenience for sRGB hex.
Percentage represents how much of Color 1 is mixed in. color-mix(in oklch, c1 30%, c2) means 30% c1 + 70% c2.
Same two colors mixed at the chosen ratio, evaluated in every interpolation space — handy for choosing the most pleasant transition (oklch and lab usually look most uniform).
Browser support: color-mix() is in all current evergreen browsers (Chrome 111+, Safari 16.2+, Firefox 113+). Polyfill via Sass or PostCSS for older targets.
Hue interpolation only matters in cylindrical spaces (hsl, hwb, lch, oklch). It controls which way the mix travels around the hue wheel — longer hue gives rainbow transitions, shorter hue gives the perceptually shortest path (default).
oklch / oklab produce uniform brightness transitions and avoid the muddy gray midpoints sRGB and HSL produce when mixing complementary colors.