What Colour Do You Get When You Mix Two Hex Codes?
When you mix two hex codes, you usually get a blended colour based on their red, green, and blue values. If you want the quick answer without doing channel math by hand, use this color mixer tool and let it do the blend for you.
The short version: hex colour mixing is numeric, not magical. A code like #ff0000 is just RGB data in base 16, so mixing is usually a matter of averaging numbers and checking what falls out the other side.
What Hex Codes Actually Represent
A hex colour is a compact way to write RGB values. #3366cc means red 33, green 66, blue cc, all in hexadecimal.
Once you treat a colour as three numbers, mixing becomes straightforward. You are not blending paint in the physical sense; you are combining channel values in a model that browsers understand.
This matters because different colour spaces behave differently. RGB is additive, which fits screens. CMYK is subtractive, which fits ink. If you want a deeper comparison of those models, why printers use CMYK instead of RGB is the right rabbit hole.
The Simple RGB Average
The most common version of hex colour mixing is a straight average of each channel. Take the red values, average them. Do the same for green and blue. Convert the result back to hex.
For example, mixing pure red #ff0000 with pure blue #0000ff gives you a midpoint around #800080. That is the familiar purple most people expect.
In code, the basic idea looks like this:
function mixHex(a, b) {
const ar = parseInt(a.slice(1, 3), 16);
const ag = parseInt(a.slice(3, 5), 16);
const ab = parseInt(a.slice(5, 7), 16);
const br = parseInt(b.slice(1, 3), 16);
const bg = parseInt(b.slice(3, 5), 16);
const bb = parseInt(b.slice(5, 7), 16);
const r = Math.round((ar + br) / 2);
const g = Math.round((ag + bg) / 2);
const bl = Math.round((ab + bb) / 2);
return `#${[r, g, bl].map(v => v.toString(16).padStart(2, '0')).join('')}`;
}That is the clean, predictable version. It is useful for palette work, UI states, and quick sanity checks.
Why Some Mixes Look Wrong
If your result looks darker, muddy, or just plain off, the tool may not be using a strict average. Some mixers weight one colour more heavily, which shifts the result toward the dominant input. Others do interpolation in a different colour space, such as HSL or LAB, which can change the visual midpoint a lot.
That is why two tools can both claim to “mix” colours and still produce different hex values. The same input pair can yield different outputs depending on whether the tool is blending numerically, visually, or with a slider position.
As a rough rule, RGB averaging is great for code. Visual mixing is better when you care about what a human eye sees. Those are not always the same thing.
When Hex Colour Mixing Is Useful
Developers use colour mixing for all sorts of small but annoying jobs. Building hover states, generating border colours, testing gradients, or nudging a brand palette toward a lighter or darker variant all fit this pattern.
- UI state design: mix a base colour with white or black to create hover, active, or disabled states.
- Gradient planning: estimate the midpoint between two stops before you wire up CSS.
- Theme work: create compatible accent colours without guessing.
- Debugging design tokens: check whether a computed colour is the one you expected.
If you are frequently checking contrast while you adjust mixed colours, the color contrast tool fits naturally beside this workflow. Mixing a colour is one thing. Making sure it still reads on a screen is another.
Hex Mixing vs CSS Color Functions
In CSS, you do not always need to precompute a mixed hex value. Modern colour functions can handle blends directly in stylesheets, which is useful if you want the browser to do the work at runtime.
For example, a design system might mix colours with CSS variables and then feed the result into a component:
:root {
--brand: #3366cc;
--accent: #cc3366;
}
.button {
background: color-mix(in srgb, var(--brand) 50%, var(--accent) 50%);
}That said, hard-coded hex values still show up everywhere. Build tools, tokens, emails, and legacy stylesheets often prefer explicit values over dynamic colour functions. A quick mixer is handy when you need the final number, not the recipe.
A Worked Example
Say you want to mix a steel blue with a warm orange and check the midpoint you would use in a gradient. Start with two hex codes and average each RGB channel separately.
Input A: #1f6feb
Input B: #f97316
A RGB: 31, 111, 235
B RGB: 249, 115, 22
Average:
R = (31 + 249) / 2 = 140
G = (111 + 115) / 2 = 113
B = (235 + 22) / 2 = 128
Result: #8c7180That result is not a perfect “paint” blend. It is a numeric midpoint, and it will often look slightly muted compared with what people expect from pigment mixing. Still, for digital work, it is deterministic and easy to reason about.
If you wanted to bias the mix toward the blue, you would change the weighting instead of using a 50/50 average. For example:
function weightedMix(a, b, weightA = 0.5) {
const weightB = 1 - weightA;
// apply weightA to each A channel and weightB to each B channel
}That is the core trick behind most practical colour blending tools: same numbers, different weights.
Frequently Asked Questions
Do two hex codes always mix to a hex code?
Yes, if the tool is doing a numeric blend in RGB or another representable colour space, the result can be written as a hex code. The exact output depends on the algorithm, but the final value is usually still a hex colour. If the tool shows a visual-only mix, it will still usually expose the final result as hex.
Is hex colour mixing the same as mixing paint?
No. Hex codes describe light on screens, so the mix is additive. Paint is subtractive, which is why red plus blue on a wall behaves differently from red plus blue pixels in a browser.
Why do some color mixers give different results for the same inputs?
Because “mix” is not one universal rule. Some tools average RGB values, some blend in HSL or LAB, and some apply weights or easing. If you need a predictable result for code, use a tool that says it works in RGB.
What is the easiest way to mix two hex colours online?
Use a browser tool that accepts two hex inputs and shows the blended output immediately. That is faster than converting to decimal by hand and less error-prone than guessing. For quick work, a dedicated mixer is usually enough.
The Bottom Line
Hex colour mixing is mostly just arithmetic with a design layer on top. If you average RGB channels, you get a predictable midpoint; if you use a different colour space or weighting, you can get something that looks better but behaves differently.
That is the useful mental model: the result depends on the rule, not just the colours. If you are building palettes, testing gradients, or comparing brand variants, it pays to know which blend method you are actually using.
When you want the answer without the spreadsheet, give the color mixer a spin. It saves the arithmetic and gets you back to the part that matters: whether the colour actually works.