Color mixer
Mix two colors at any ratio in OKLab, OKLCH or sRGB. Copy the result or a ready color-mix() expression.
- HEX
- RGB
- OKLCH
CSS with fallback
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);Steps from first to second
The same mix in every space
sRGB turns gray and dark in the middle. OKLab keeps brightness even. OKLCH and HSL keep saturation but travel around the hue wheel.
Questions and answers
What is color-mix() in CSS?
color-mix() is a CSS function that blends two colors in a color space you choose, for example color-mix(in oklab, #ff5733, #3b82f6 30%). It works in all current browsers. Keep a plain color before it as a fallback for older ones, like in the snippet above.
Which color space should I mix in?
OKLab is the safest default: the middle keeps its brightness and does not turn muddy. OKLCH keeps colors saturated but takes the shortest way around the hue wheel, so red and blue pass through purple and pink. sRGB is how old tools mix, and its middle often looks gray and dark.
Why is mixing light different from mixing paint?
Screens add light, so this tool averages light values: blue and yellow give a gray or a pale color, not green. Paint subtracts light, which is why the same mix on paper looks green. To predict paint, use a paint mixing model instead of a screen color space.