How do I mix colors in CSS?

Use the color-mix() function: color-mix(in oklch, color1 50%, color2 50%). Adjust the percentages to control the blend ratio. oklch produces the most natural results.

What is the difference between additive and subtractive color mixing?

Additive mixing (RGB) combines light — used by screens. Subtractive mixing (CMYK) combines pigments — used by printers. Mixing red + green gives yellow on screen but brown in paint.

Why does mixing blue and yellow in RGB give gray?

sRGB color space doesn't map linearly to human perception. Mix in oklch or lab color space instead — these produce perceptually correct results where blue + yellow = green.

How to Mix Colors in CSS (and Color Theory)

🧪

Try Color Mixer

Free, no signup →