Boneyard Tools

How RGB Color Blending Works

A plain-English look at how two hex colors are mixed by interpolating red, green and blue channels, plus why midpoints round the way they do.

From hex to three numbers

Every hex color is just three numbers packed into a string: two digits each for red, green and blue, each ranging from 0 to 255. The code #ff0000 means red 255, green 0, blue 0, while #0000ff is red 0, green 0, blue 255. Before any blending happens the mixer parses both codes into these numeric triples, expanding shorthand like #f00 into #ff0000 and dropping an optional leading hash. Working with the numbers instead of the text is what makes a precise, repeatable blend possible.

Linear interpolation, one channel at a time

To blend two colors the mixer walks each channel independently using the formula new = A + (B - A) * ratio, where ratio is the weight of the second color. Red is blended with red, green with green and blue with blue, so the three channels never bleed into one another. A ratio of 0 returns Color A untouched, a ratio of 1 returns Color B, and 0.5 gives the exact average. Because the same simple formula runs on all three channels, you can predict any midpoint by hand: halfway between #ff0000 and #ffff00 is red 255, green 128, blue 0, or #ff8000.

Why midpoints round up

Channel values must be whole numbers, but interpolation often lands on a fraction. A 50/50 mix of black and white puts every channel at 127.5, precisely between 0 and 255. The mixer rounds to the nearest integer, and by convention a trailing .5 rounds up, so 127.5 becomes 128, which is hex 80. That is why an even grey comes out as #808080 rather than #7f7f7f. Knowing this rule explains the occasional one-step difference between what you expect and what a naive floor would produce.

sRGB blending versus perceptual blending

This mixer blends the stored sRGB values directly, which is exactly how a plain hex interpolation behaves in CSS. It is fast, deterministic and matches most design tools, but it is not gamma corrected. Human vision is non-linear, so a raw channel midpoint can appear a little darker or muddier than a blend computed in a perceptual space such as OKLCH or CIELAB. For everyday UI work the sRGB result is what you want; for large gradients or brand-critical color you may prefer a perceptual tool and then paste the hex here to double check.

Frequently asked questions

Is channel interpolation the same as averaging?

At a 50/50 ratio, yes. The formula reduces to (A + B) / 2 for each channel. At any other ratio it is a weighted average that leans toward whichever color carries more weight.

Will the same two colors always give the same blend?

Yes. The blend is a pure calculation with no randomness, so identical inputs and ratio always produce the identical hex result.