How to Mix Colors in CSS (and Color Theory)
Color mixing — combining two or more colors to create a new one — is fundamental to palette building, gradient design, and creating harmonious interfaces. CSS now has a native color-mix() function, but understanding the theory behind mixing helps you predict results and make better choices.
- Mix two colors together using CSS color-mix(), traditional color theory, and online tools.
- Covers css color-mix() function.
- Covers additive vs subtractive mixing.
- Covers practical uses.
- Covers perceptual color spaces.
CSS color-mix() Function
CSS Level 5 introduced color-mix(), which blends two colors in a specified color space:
color: color-mix(in srgb, #FF6B6B 60%, #0575E6 40%);
This mixes 60% coral with 40% blue in the sRGB color space. The color space matters — mixing in oklch or lab produces more perceptually uniform results than sRGB, avoiding the muddy midpoints that sRGB mixing can produce. color-mix() is supported in all modern browsers since 2023.
Additive vs Subtractive Mixing
Digital screens use additive mixing (RGB) — combining light. Red + green = yellow, red + blue = magenta, all three = white. Paint and print use subtractive mixing (CMYK) — combining pigments. Red + blue = purple, yellow + blue = green, all three = dark brown/black. The Color Mixer tool uses additive (RGB) mixing by default, with options for different color spaces.
Practical Uses
Creating intermediate colors for gradients and transitions. Generating accessible color variants (mix with white for tints, black for shades). Building color ramps that transition smoothly between two brand colors. Creating overlay effects (mix a brand color with a photo tint). The Color Mixer lets you blend any two colors with adjustable ratios and see the result with its HEX, RGB, and HSL values.
background-size animation or @property registered custom properties instead.Perceptual Color Spaces
Mixing in sRGB can produce unexpected results — mixing blue and yellow in sRGB gives a muddy gray rather than the green you'd expect. Mixing in oklch or lab color spaces produces perceptually uniform blends that match human expectations. When using color-mix() in CSS, specify oklch for the most natural results: color-mix(in oklch, blue, yellow) produces a clean green.