Color Mixer — Blend Two Hex Colors
Mix two hex colors by an adjustable ratio and copy the resulting hex plus a live swatch — runs 100% in your browser with no upload.
#808080
🔒 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 hex code and a live swatch that updates as you move the slider, and one click copies the result to your clipboard for CSS, design tools, or a style guide. Both inputs accept a color picker or a typed hex value, so you can paste brand colors straight in.
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, or a value without the leading hash.
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.