Color Mixer
Blend two hex colours at any ratio.
How to use
- 1 Choose your two colours with the swatches or by typing hex codes.
- 2 Drag the slider to set how much of the second colour to mix in.
- 3 Switch between sRGB and linear-light blending to compare results.
- 4 Copy the resulting hex code for your design.
About Color Mixer
The Color Mixer blends any two colours and shows you the exact result as both a hex code and RGB values.
Pick a first and second colour with the swatches or by typing a hex code, then drag the slider to set how much of the second colour to fold in — from a barely-there tint to a full takeover.
The preview swatch updates live so you can dial in precisely the shade you want for a gradient stop, a hover state, a chart series or a brand accent.
It offers two blending modes.
The simple sRGB mode interpolates each channel directly, which is fast and matches how many design tools and the older CSS behaviour mixed colours.
The linear-light mode first converts each colour into linearised light, blends there, and converts back — this is closer to how physical light actually combines and avoids the muddy, darkened midtones you sometimes get when mixing a bright colour with black or with its complement.
Toggling between them is an easy way to see why two greens or a red-and-cyan blend can look different depending on the maths.
Everything runs locally in your browser, so no colours or codes are uploaded, and the tool keeps working offline once loaded.
Copy the resulting hex with one click and drop it straight into your stylesheet, design file or palette.
FAQ
What is the difference between sRGB and linear-light blending?
sRGB blends the stored colour values directly; linear-light first converts to physical light intensity, blends, then converts back. Linear avoids the dull, darkened midtones that simple sRGB mixing can produce.
Why does a 50/50 mix of black and white look different in each mode?
In sRGB it lands on #808080, but in linear light the perceptual midpoint is brighter because human vision and the sRGB curve are non-linear. Both are valid — pick whichever matches your tool.