Color Mixer — Blend Two Colors and Every Step Between
Mix two colours at any ratio, read the result as HEX, RGB and HSL, and copy the whole ramp between them. 100% in your browser, no upload.
#808080
rgb(128, 128, 128)
hsl(0, 0%, 50.2%)
Light — Black text on it: 5.32:1
Every colour between the two. Click a swatch to copy it.
#000000 #404040 #808080 #bfbfbf #ffffff
🔒 Colors are mixed in your browser — nothing is uploaded.
What this color mixer does
Pick two hex colors and drag the ratio slider to blend them, from 0% (color A untouched) through the exact midpoint to 100% (color B). The tool shows the blended color as HEX, RGB and HSL at once, each with its own copy button, beside a live swatch that updates as you move the slider. Both inputs accept a color picker, a typed hex value, or an rgba() color with opacity — #ff000080 and rgba(255, 0, 0, 0.5) both work, and the mixed color carries an alpha of its own, drawn against a checkerboard so you can see it.
The whole ramp, not one stop at a time
Set Steps to anything from 2 to 12 and every color between A and B appears at once — the two ends and the evenly spaced stops between them — as a strip of swatches you can click to copy one, with the whole set listed underneath and a Copy all button. Choose HEX, RGB or HSL for the set. The ramp uses the same blend space as the slider, so a perceptual scale is one radio button away, and everything — both colors, the ratio, the blend space, the step count and the notation — lives in the page link, so a scale worth showing someone is a URL.
How the colors are blended
Each channel is mixed with straight linear interpolation in RGB: the red, green, and blue values of color A move toward color B in proportion to the slider position, then round to the nearest 8-bit value. A ratio of 0.5 lands exactly halfway between the two, so black and white produce mid-gray #808080. Switch the Blend space to Perceptual (OKLab) to interpolate the way CSS color-mix() does instead — the midpoint of black and white becomes #636363, and red mixed with green becomes a vivid gold rather than a muddy olive. The math is deterministic, meaning the same two colors, ratio, and space always yield the same result. You can enter standard 6-digit hex, shorthand like #fff, the 4- and 8-digit forms that carry an alpha, a value without the leading hash, or an rgba() color. When the two colors have different alphas the channels are interpolated premultiplied by them, the same rule CSS color-mix() follows, so half of a color that is not there does not tint the result.
Frequently asked questions
What does the ratio slider actually control?
It sets how far the blend moves from color A toward color B. At 0% you get color A, at 100% you get color B, and 50% is the exact midpoint of the two. Every step in between is a straight linear blend of the two colors.
What is the difference between the sRGB and Perceptual (OKLab) blend spaces?
sRGB mixes the raw red, green, and blue values, which is the classic behaviour but can look muddy at the midpoint. Perceptual (OKLab) blends in the OKLab space CSS color-mix() uses, keeping the transition even to the eye — red-to-green passes through a vivid gold instead of a dull olive, and black-to-white lands on #636363. Endpoints are identical in both spaces.
Is any color or data uploaded to a server?
No. The blend is calculated locally with JavaScript in your browser. Nothing you enter or copy is sent, stored, or logged anywhere.
Why is mixing black and white at 50% not exactly gray to my eye?
In sRGB the tool blends the raw values, so 50% of #000000 and #ffffff is #808080. Perceptual brightness differs because displays are gamma-encoded — switch the blend space to Perceptual (OKLab) for the perceptually centred #636363 instead.
Can I mix colors that have transparency?
Yes. Either box takes an 8-digit hex like #ff000080, the 4-digit #f00a shorthand, or an rgba() color such as rgba(255, 0, 0, 0.5), and the mixed color carries an alpha of its own. The alpha is interpolated on its own and the color channels are blended premultiplied by it — the rule CSS color-mix() follows — so mixing a fully transparent red into blue gives blue at half opacity rather than a purple.
How do I get all the colors between two colors, not just one?
Set the Steps box under the result to anything from 2 to 12. The tool draws that many evenly spaced colors from A to B, both ends included, as swatches you can click to copy individually, with the whole set listed below and a Copy all button. Pick HEX, RGB or HSL for the set, and it follows whichever blend space is selected.
Which color notations does it output?
Three, all at once: HEX, RGB and HSL, each with its own copy button. When the mix has an alpha they become the 8-digit hex, rgba() and hsla() forms; an opaque color is not given a redundant alpha of 1.