Blending colours by eye is unreliable, because the midpoint between two hex codes is rarely the colour a person would guess. A mix of a saturated blue and a saturated yellow, for example, produces a specific, calculable green rather than the muddy grey some people expect, and the exact shade depends on precisely where the two starting points sit in RGB space. A calculator removes that guesswork and gives you a reproducible result you can name with a single ratio number.
Every blend happens in your browser tab. The two colours you choose and the ratio between them are never sent anywhere, they are read straight from the colour inputs and combined with a short JavaScript function that runs on your own device.
How this color mixer blends two colors
The maths behind this color mixer is linear interpolation, applied independently to the red, green and blue channels. For a ratio of 50 percent, each output channel is the simple average of the two input channels. For a ratio of 25 percent, the output sits a quarter of the way from the first colour toward the second, and at 0 or 100 percent the output is exactly one of the two original colours with no blending at all.
This is the same model used by the CSS color-mix() function when it operates in the srgb colour space, interpolating each channel's raw numeric value rather than any perceptual model. It is simple, predictable and matches what most design tools do by default, which is why it is the right choice for a general purpose color mixer rather than a specialised print or paint simulation.
When you need to mix colors online instead of guessing a hex code
Blending two known colours by typing random hex values until something looks right wastes time and rarely lands on a value you could reproduce later. Reaching for a tool to mix colors online instead gives you an exact, repeatable ratio, which matters whenever the result needs to be documented, shared with a designer, or dropped straight into a stylesheet. A simple hex color mixer removes the guesswork entirely, since the same two inputs and the same ratio always reproduce the same output.
- Building a hover or active state that sits partway between a brand colour and white or black.
- Finding the midpoint between two brand colours for a shared accent or divider.
- Generating a transition colour for an animation or gradient stop by hand.
- Checking what a specific blend ratio actually looks like before committing to it in code.
- Matching a colour you can only describe as being between two others.
Digital color blending compared with mixing paint
People often expect a colour mixer to behave like paint, where blue and yellow paint make green because pigments subtract wavelengths of light from what reaches your eye. Screens do the opposite: red, green and blue light are added together, so this is RGB colour blending, not pigment mixing, and the additive maths produces different, more predictable results than a paint palette ever would.
The practical difference shows up most with complementary colours. Mixing paint versions of red and green tends toward a dull brown, while mixing red and green light in equal RGB proportions produces a shade of yellow or olive, since both channels contribute their full intensity to the result rather than cancelling each other out. If a blend surprises you, it usually means you were expecting paint behaviour from an RGB color blending calculation.
Reading the mix ratio slider
The ratio slider runs from 0 to 100 percent. At 0 percent the output is identical to your first colour, at 100 percent it is identical to your second, and every value in between is a weighted average, with the weight shifting smoothly toward whichever colour the slider is closer to. A ratio of 30 percent, for instance, keeps 70 percent of the first colour's influence and 30 percent of the second's.
There is no need to land on a round number. Fine adjustments near 45 to 55 percent are where the two source colours contribute most equally, and small changes there tend to produce the most visually distinct range of intermediate colours.
Linear interpolation, channel by channel, in RGB
Both hex inputs are parsed into their red, green and blue channel values, each an integer from 0 to 255. The ratio is converted into a fraction from 0 to 1, and each channel of the output is calculated as channel1 plus the difference between channel2 and channel1, multiplied by that fraction, then rounded back to a whole number. The three resulting channels are reassembled into a hex string and also converted to HSL for the readout.
Because every step is plain arithmetic on numbers already sitting in memory, there is no network request, no image decoding and no measurable delay, the blended colour is available as fast as the browser can repaint the swatch.
Using the mixed colour in CSS and design tools
Once you have a blend you like, the hex, RGB and HSL values can be copied straight into a stylesheet, a design tool's colour field, or a component library's token file. Because the underlying blend is linear interpolation in RGB, the same hex output this color mixer gives you is what a modern browser produces from color-mix(in srgb, colorA, colorB percentage), so the two stay consistent if you later decide to compute the blend in CSS itself instead of pasting a fixed value.
For a scale of several intermediate steps rather than one blend, run the ratio slider across a few values and record each result, or reach for a dedicated palette tool once you know which two colours anchor the range you need.
| Ratio | Result |
|---|---|
| 0% | Exactly the first colour |
| 25% | Mostly the first colour, a quarter of the way toward the second |
| 50% | The true midpoint, each channel averaged evenly |
| 75% | Mostly the second colour, a quarter of the way from it toward the first |
| 100% | Exactly the second colour |
How to mix two colors
- 1
Pick your first colour
Choose or type the hex code for the colour the ratio slider starts from.
- 2
Pick your second colour
Choose or type the hex code for the colour the slider blends toward.
- 3
Set the mix ratio
Drag the slider between 0 and 100 percent to weight the blend toward either colour.
- 4
Copy the result
Copy the blended colour as hex, RGB or HSL directly from the output panel.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the color mixer.
No. Paint mixing is subtractive, pigments absorb wavelengths of light, while this tool performs additive RGB colour blending the same way a screen combines red, green and blue light. Two colours that would turn brown as paint can produce a bright yellow or olive shade here, because the channel maths works completely differently from pigment.
Set the ratio slider to 50 percent. At that value each channel of the output is the plain average of the corresponding channel in both input colours, giving you the true midpoint rather than an approximation. Moving the slider away from 50 shifts the weighting smoothly toward whichever colour is closer.
Yes. Once the page has loaded, every calculation runs locally in JavaScript with no further network requests, so the blend keeps working even if your connection drops. Nothing about the two colours you choose or the ratio between them is ever transmitted anywhere.
Because this is RGB color blending, an additive model where combining full intensity red light with full intensity green light produces yellow light, matching how a screen actually renders colour. Brown only appears when pigments are involved, since paint subtracts wavelengths rather than adding them.
Yes. This is a natural way to blend two colors for a brand guideline, since the ratio you land on is a single documented number rather than a hex value nobody can explain, and anyone on the team can reproduce the exact same result by entering the same two colours and the same percentage.
For the same two colours and the same percentage, yes, when color-mix() is used in the srgb colour space, since both perform the identical linear interpolation on each channel. Browsers can also interpolate in other colour spaces such as oklab, which will produce a visibly different result from this simple RGB blend.
Only in which end of the ratio slider each colour sits on. A 30 percent mix of colour A toward colour B is identical to a 70 percent mix of colour B toward colour A, since linear interpolation between two points is symmetric once you account for which end the ratio is measured from.