CodeKitHubWhat Is This Tool?
A color mixer linearly interpolates between two colors' red, green and blue channels at a chosen ratio, the same math a gradient uses internally. At 0% the result is Color A, at 100% it's Color B, and at 50% it's the arithmetic midpoint of each RGB channel.
This is different from mixing physical paint (which is subtractive and depends on pigment), and it's not the same as averaging in HSL space either — RGB linear interpolation is what CSS gradients, design tools and most "color between two colors" utilities use, so the result matches what you'd see in a browser gradient between the same two colors.
Why Use It?
- Find a natural-looking hover or active state color that sits between your base color and an accent — instead of guessing a random adjustment.
- See the exact HEX code at any ratio, not just eyeball a gradient screenshot.
- The 11-step ramp gives you a full palette from one color to the other in one click, useful for data visualization or a multi-stop gradient.
- Click any step to copy its HEX code instantly.
- Free, instant, and fully local — no upload, no account.
How to Use
- Pick Color A and Color B using the color pickers or by typing a HEX code.
- Drag the ratio slider to set how much of Color B to mix in.
- Read the resulting HEX and RGB values above the swatch.
- Click any swatch in the 11-step ramp below to copy its HEX code.
Example
Input
Color A #3B82F6 (blue), Color B #F59E0B (amber), ratio 50%Output
#9B9E7D — rgb(155, 158, 125)At exactly 50%, each RGB channel is the arithmetic average of the two input colors' channels.
Frequently Asked Questions
Why doesn't this match what I'd get mixing actual paint?
Paint mixing is subtractive (pigments absorb light) and depends on the specific pigments involved — mixing blue and yellow paint gives green, for example. This tool mixes light (RGB channels) additively/linearly, which is how screens, CSS gradients and most digital design tools blend colors. The two systems produce genuinely different results by design, not by error.
Is this the same as a CSS linear-gradient between the two colors?
Yes — a CSS linear-gradient(colorA, colorB) interpolates RGB channels the same way this tool does, so the color you'd see at the midpoint of that gradient matches the 50% result here.
Why does the mixed color sometimes look muddy or grey?
Mixing two saturated but very different hues (like blue and orange, which are near-complementary) in RGB space often produces a low-saturation, greyish-brown midpoint — this is a real property of RGB interpolation, not a bug. If you want a more vivid blend, try mixing colors that are closer together on the color wheel, or blend in HSL space by adjusting hue and keeping saturation high (not something this straight RGB mixer does).
Can I mix more than two colors at once?
Not in a single step — the tool blends exactly two colors. To combine three, mix the first two at your chosen ratio, copy the result, and paste it in as the new Color A against your third color. Doing it in stages also gives you control over the weighting, which a single three-way average wouldn't.
Should I use this or the Color Shades Generator?
If you need a color that sits between two different colors — say, a transition shade between your brand blue and an accent amber — use this mixer. If you need lighter and darker variants of one color (hover states, backgrounds, a Tailwind-style 50-900 ramp), use the Color Shades Generator instead: it keeps hue and saturation fixed and only varies lightness, so every result stays clearly in the same color family.
What color formats can I type into the input fields?
The text fields accept 6-digit HEX codes, with or without the leading # (e.g. 3B82F6 or #3B82F6). Shorthand 3-digit hex, rgb() notation and CSS color names aren't parsed there — but you can pick any color visually with the native color picker next to each field, and the HEX field updates to match.