About the Color Mixer
The Color Mixer blends two colors and shows you the exact result. Move the ratio slider to control how much of each color goes into the mix, from 0% (pure Color A) to 100% (pure Color B), and generate up to 15 evenly spaced steps between them.
Two blending modes are available. RGB mixing is what most software and CSS gradients do by default. Linear light mixing converts colors to linear light before blending, which avoids the muddy, dark midpoints you sometimes see between complementary colors and gives results closer to mixing real light. The steps are perfect for building data visualization scales, gradients and smooth UI transitions.
How to use the Color Mixer
- Choose Color A and Color B.
- Drag the ratio slider to set the mix.
- Pick RGB or Linear light mode and the number of steps.
- Copy the mixed color or any intermediate step.
Frequently asked questions
Is this the same as mixing paint?
No. Digital mixing blends light (additive color). Mixing blue and yellow paint makes green, but mixing blue and yellow light gives a gray or pink-ish tone.
Which mode should I use?
Use RGB to match what CSS does, or Linear light for more natural, brighter blends.
Can I use CSS to mix colors?
Yes. Modern CSS supports color-mix(in srgb, colorA 50%, colorB), which matches the RGB mode here.