Color Mixer
Blend two colors at any ratio and get the mixed result instantly.
Mixed result
#9A7B86
rgb(154, 123, 134)
hsl(339, 13%, 54%)
How color mixing works
This tool blends two colors using linear RGB interpolation — the same method used by CSS color-mix() and design tools like Figma. At 0% the result is Color A; at 100% it is Color B. At 50% you get an equal blend. The gradient preview lets you see the entire spectrum of possibilities at once.
When to use a color mixer
- Finding a midpoint between a brand primary and white to create a light tint.
- Generating intermediate steps between two palette swatches.
- Softening a color by blending it with its complementary without changing the hue dramatically.
- Previewing how a semi-transparent overlay will look over a background before writing the CSS.
Frequently asked questions
Is this the same as CSS color-mix()?
Yes — when the interpolation color space is sRGB. CSS color-mix(in srgb, ...) produces the same result as this tool. Other color spaces like oklch give perceptually different midpoints.
Can I mix more than two colors?
Not directly. To blend three colors, mix A and B at a ratio to get an intermediate, then mix that result with C. Copy the mixed HEX from the result card and paste it into Color A for a second pass.
