CSS color-mix() Playground
Mix two colors using native CSS color-mix(). Adjust the ratio and color space.
0% = Color A only, 100% = Color B only, 50% = equal mix
Visual Mix
A
Result
B
0% (A) 50% 100% (B)
Mixed Color Result
#c44f90 oklch(0.6 0.2 350) rgb(196, 79, 144) Generated CSS
color-mix(in oklch, #ff6b35 50%, #8338ec)About CSS color-mix()
The color-mix() function
allows you to mix two colors together in a specified color space. It's a native CSS feature supported in all modern browsers.
Syntax: color-mix(in <color-space>, <color1> <percentage>, <color2>)
Color spaces matter: Different color spaces produce different mixing results. OKLCH is recommended for perceptually uniform mixing, while sRGB matches traditional blending behavior.