Blending two colours is how palettes find their middle ground: the exact shade between a brand colour and white, or the meeting point of two accent colours for a gradient stop. This mixer takes two colours and a ratio, and returns the precise blended hex, with a preview swatch so you can judge the result by eye as well as by number. The blending is a straight linear mix in RGB space, which is predictable and easy to verify: at fifty percent, each channel is the average of the two inputs. It is the companion to the shades generator, which scales one colour, while this tool bridges two, and together they cover most palette-building arithmetic without opening a design application.
Quick Answer: Pick two colours, set the mix ratio, and get the exact blended hex.
Free Online Tool
Color Mixer
Two colours in, their meeting point out.
How to Use the Color Mixer
- Pick the first colour.
- Pick the second colour.
- Set the ratio: the percentage of the second colour.
- Press Mix to compute the blended colour.
- Copy the blended hex into your palette.
Key Features
- Linear RGB blending of any two colours.
- Ratio control from 0 to 100 percent.
- Exact blended hex value.
- Preview swatch of the result.
- Instant, free, and private with no sign-up.
Best Practices and Tips
- At fifty percent, the result is the average of the two colours, which is the natural midpoint for gradients.
- Blending toward white or black is the same operation as tinting or shading, with the second colour set accordingly.
- Small ratio steps near the ends produce subtle variations, useful for hover states and borders.
- Judge the result on the swatch, not just the numbers; RGB averages can surprise the eye, especially with complementary colours.
- For a gradient with more stops, mix at twenty-five, fifty, and seventy-five percent to get an even ramp.
Common Mistakes to Avoid
- Assuming a fifty-percent mix of complementary colours looks vibrant; it often turns muddy grey-brown.
- Forgetting which side of the ratio is which, and mixing mostly the wrong colour.
- Using the blended hex without checking it against the background it will sit on.
- Expecting RGB mixing to match paint mixing; light and pigment blend differently.
Frequently Asked Questions
How is the blend calculated?
Each RGB channel is blended independently: the result channel equals the first colour’s channel times one minus the ratio, plus the second colour’s channel times the ratio. At fifty percent, that is the simple average of the two channels.
Why does mixing red and blue give purple, not grey?
Because the channels blend separately: red plus blue keeps both the red and blue channels high while green stays low, which the eye reads as purple. Muddy results happen when the channels average toward similar values, producing a greyish tone.
Is RGB mixing the same as paint mixing?
No. Paint mixes subtractively, absorbing light, while screen colours mix additively in RGB. The mixer here follows the screen model, which is what matters for digital design, even when the result differs from what paint would do.
Can I mix more than two colours?
Not in one step, but you can chain mixes: mix the first two, then mix the result with a third colour at the appropriate ratio. The result is a weighted blend of all three, with weights determined by the two ratios.
What ratio should I use?
It depends on the goal: fifty percent for a midpoint, twenty-five or seventy-five percent for a colour leaning toward one side, and small values near zero or one hundred for subtle tints of a base colour. The preview swatch is the fastest guide.