Mixing two hex colors correctly means blending each red, green, and blue channel independently using a weighted average — specifically, result = round(A × (1 − ratio) + B × ratio) — so that at a 50% ratio you land on the exact channel midpoint, and at 0% or 100% you recover the pure source colors. This per-channel approach is called sRGB linear interpolation, and it is the same math used by CSS gradients, design tokens, and most UI color systems, which is why it produces predictable, copy-pasteable results for any digital project. The Color Mixer applies this formula in real time: you enter two hex values (or rgb() strings, or visual swatch picks), drag the ratio slider to choose the split, and read both the lowercase six-digit hex and the rgb() string of the blended result, with a live 11-step gradient showing every transition between your two inputs. Because every channel is rounded to a whole number between 0 and 255 and the ratio is clamped to the range [0, 1], the output is always a valid hex you can drop straight into a stylesheet, a Figma file, or any design tool that expects a standard six-digit color.
The word "correctly" matters because there are several ways to combine two color values, and they do not all agree. Subtractively mixing pigments (the way real paint, ink, or dye behaves on paper) follows very different physics from additively mixing screen light, and a tool built on the wrong model will give you results that look muddy or surprising next to what you actually see in your design. Getting hex blending right for digital work means using the same model your screen, your browser, and your CSS already use — and that model is sRGB linear interpolation.
Defining Correct Hex Color Mixing
For digital color work, "correct" means the blended hex you produce will appear identical when rendered by any browser, operating system, or design application that follows the sRGB standard — which is essentially all of them. The definition is precise: for each of the three channels (red, green, blue), compute the weighted average of the two source values using the chosen ratio, round to the nearest integer, and clamp to the range 0–255. The full formula is result = round(A × (1 − ratio) + B × ratio), applied separately to R, G, and B. When the ratio is 0.5, every channel becomes the exact midpoint of the two sources, and the resulting hex is the unambiguous "halfway" color between them.
This matters because some quick mental shortcuts give wrong answers. Averaging the two hex values as numbers (treating #ff0000 as 16711680) does not produce a valid midpoint. Converting to HSL and averaging hue, saturation, and lightness separately produces perceptually different results that do not match what CSS gradients render. The per-channel sRGB approach is the one that matches the output of linear-gradient(), image-processing libraries, and most color pickers, so adopting it keeps your hand-mixed values consistent with the rest of your design system.
Input Formats the Tool Will Parse Reliably
One of the easiest ways to make sure your mix is correct is to feed the tool valid input in the first place. The Color Mixer accepts three written formats plus a visual picker, and it tolerates a wide range of formatting quirks so you do not have to clean up copy-pasted values.
| Format | Example | Notes |
|---|---|---|
| Short hex | #f00 | Three-digit shorthand expands to #ff0000 |
| Full hex | #3b82f6 | Standard six-digit hex |
| rgb() string | rgb(59, 130, 246) | Functional CSS notation |
| Visual pick | Swatch click | Opens the native color picker |
Input is case-insensitive, extra spaces are ignored, and the leading hash mark is optional. That means F00, f00, FF0000, and rgb(255, 0, 0) all parse to the same source color, so you can paste a value from any tool — Figma's inspector, a CSS file, a Slack message, a design token export — without reformatting it first.
Blend Two HEX Colors Correctly in 5 Steps
- Enter Color A. Type the first hex (for example #ff0000) or an rgb() string into the Color A field, or click its swatch to open the visual picker.
- Enter Color B. Add the second source the same way in the Color B field — short hex, full hex, rgb(), or swatch pick. The two fields accept identical formats, so you do not have to match styles between them.
- Set the ratio. Drag the slider from 0% (pure Color A) to 100% (pure Color B). The label updates as you drag — for example "70% A / 30% B" — so you always know the current split and can reproduce it later.
- Read the result. Look at the result panel for both the lowercase six-digit hex and the rgb() string. Both update instantly with every slider movement, so the displayed value is always the value that matches the current ratio.
- Copy and use. Click the Copy button to put the result hex on your clipboard, then paste it directly into your CSS, design file, or token export. The gradient bar below the result gives you eleven evenly spaced preview steps between the two source colors, including both endpoints, so you can scan for a more pleasing intermediate before copying.
Using the Color Mixer this way guarantees that the value on your clipboard came from the same math your browser uses to render gradients, so the color you see in the tool is the color you will see on the page.
Verifying the Mixed HEX Result
Even with a reliable tool, it pays to confirm the math by hand once on a simple example so you trust the result on harder ones. Take Color A as pure red #ff0000 (R=255, G=0, B=0) and Color B as pure blue #0000ff (R=0, G=0, B=255), and set the ratio to 0.5.
- R = round(255 × (1 − 0.5) + 0 × 0.5) = round(255 × 0.5) = round(127.5) = 128
- G = round(0 × 0.5 + 0 × 0.5) = round(0) = 0
- B = round(0 × 0.5 + 255 × 0.5) = round(255 × 0.5) = round(127.5) = 128
The blended result is rgb(128, 0, 128), which is the six-digit hex #800080 — a clean magenta. Plug the same inputs into the Color Mixer at a 50% ratio and you will see the identical value, confirming the formula is what the tool is actually running. From then on, you can trust any other ratio you set: 25% A / 75% B will produce rgb(64, 0, 191), and 75% A / 25% B will produce rgb(191, 0, 64), both valid six-digit hex values you can paste anywhere.
A second quick sanity check: at the slider extremes, the result must equal the source. Drag to 0% and the panel should show exactly Color A's hex; drag to 100% and it should show exactly Color B's hex. If either endpoint drifts, something other than the documented formula is being applied, and you should not trust the intermediate values either.
Pitfalls That Make a HEX Mix Look Wrong
Most "wrong-looking" hex mixes come from one of a handful of recurring mistakes. Watching for these will keep your blends on the rails.
Confusing screen light with paint. The tool mixes sRGB values additively, the way a screen combines emitted light. That means #ff0000 plus #0000ff at 50% gives magenta #800080, not the dark muddy purple you would get from stirring red and blue acrylics on a palette. Subtractive pigment mixing follows entirely different physics — CMYK conversion or RYB approximations — and no screen-based blend can model it accurately. If your goal is digital output (web, app, chart, icon, slide deck), sRGB interpolation is the right model; if you are predicting how real ink will print on paper, switch to a CMYK-aware workflow instead.
Assuming a 50% slider is the "average color." At 50% the result is the midpoint of each channel, which is the mathematical average, but that does not always look like the perceptual midpoint. A small desaturated grey halfway between two vivid complementary colors will appear duller than you expect, because the eye weights saturation non-linearly. For UI work, a perceptually pleasing intermediate often lives somewhere off-center on the slider, and the 11-step gradient bar is the fastest way to spot it.
Rounding-direction surprises. Channels round to the nearest integer, and standard rounding of 127.5 lands on 128 (you saw this in the worked example above). That means adjacent ratios can occasionally produce the same channel value, creating small "flat" regions in the gradient where moving the slider does not change the hex. This is correct behavior, not a bug — it is the rounding floor that converts continuous math into a discrete 8-bit color space.
Trusting a single format. If you pasted a value and the result looks off, switch input format as a quick check. The same color written as #f00, #ff0000, and rgb(255, 0, 0) should produce identical blends; if they do not, one of the inputs was mistyped rather than misformatted. The tool parses all three, so the fastest debug is to rewrite your inputs in a different format and see whether the output changes.
If your mix still looks wrong after ruling out those four pitfalls, the issue is usually upstream of the math — a wrong source color, a copy-paste error, or a perceptual mismatch with the surrounding design — and a quick walk-through of how to fix a hex color mix result that looks wrong can help you isolate which one.
All of the math above runs locally in your browser. No hex values, rgb() strings, slider positions, or copied results are ever sent to a server, no sign-up is required, and there are no usage caps, so you can iterate as many times as you need until the blend is exactly right.
For a deeper look, see Use a Font Pairing Generator Correctly From Input to Code.