Color Mixer Tool
Set two hex colors, then drag the ratio slider to blend them channel by channel and read the exact hex in between. The mixer interpolates the red, green and blue values separately and rounds each to a whole number. Everything runs in your browser, so your colors never leave your device.
How to mix two colors
- Set Color A with the color swatch or by typing a hex code like #ff0000.
- Set Color B the same way, using its picker or a hex value.
- Drag the Mix ratio slider; the label shows the split, for example 70% A / 30% B.
- Watch the Mixed color swatch and hex value update as you slide.
- Click Copy hex to paste the result into your CSS or design tool.
Examples
Black and white, 50/50
#000000 + #ffffff at 50% B
#808080
Red and blue, 50/50
#ff0000 + #0000ff at 50% B
#800080
Red and yellow, 50/50
#ff0000 + #ffff00 at 50% B
#ff8000
Frequently asked questions
How does the color mixer blend two colors?
It converts both hex codes to red, green and blue, then linearly interpolates each channel: new = A + (B - A) * ratio. At 50/50 each channel is the plain average of the two colors, which gives an even blend.
What does the mix ratio control?
The slider sets the weight of Color B. All the way left is 100% A (the first color), all the way right is 100% B (the second color), and the middle is an even 50/50 blend. The label always shows the current A and B percentages.
Why is a 50/50 mix of black and white #808080 and not #7f7f7f?
Each channel lands on 127.5, exactly halfway between 0 and 255. The result is rounded to the nearest whole number, and 127.5 rounds up to 128, which is hex 80. So you get #808080 rather than #7f7f7f.
Can I use shorthand or unprefixed hex codes?
Yes. A three-digit hex like #f00 is expanded to #ff0000 automatically, and the leading hash is optional, so f00 and #f00 both work. The color also accepts uppercase or lowercase digits.
What format is the output?
Always a six-digit lowercase hex string with a leading hash, such as #ff8000. Each channel is padded to two digits, so the value is ready to drop straight into CSS.
Does it blend in sRGB or a perceptual color space?
It blends the raw sRGB channel values, the same math CSS uses for a plain hex interpolation. This is fast and predictable, but it is not gamma corrected, so a midpoint can look slightly darker than a perceptual blend of the same two colors.
What happens if I type an invalid hex code?
The mixed swatch is hidden and a short hint asks for two valid hex colors like #ff0000 and #0000ff. As soon as both fields are valid the result reappears. The native color swatch falls back to black for anything it cannot parse.
Can I mix more than two colors at once?
This tool blends exactly two colors. To build a full ramp between several colors, use the related gradient generator or shades generator, which chain multiple stops together.
Is my color data sent to a server?
No. The blend is computed locally in your browser with a pure function, so your color values are never uploaded or stored anywhere.
Learn more
- 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.
Related tools
Color Shades Generator
Generate tints and shades from one hex color online. Pick a base color and get lighter and darker steps toward white and black, ready to copy.
Gradient Generator
Generate CSS gradient code from color stops online. Pick colors, set the angle, switch between linear and radial, then copy the gradient.
Air Fryer Converter
Convert any conventional oven recipe to air fryer settings. Lower the temperature by 25 F and cut the cook time by about 20 percent automatically.
Baker's Percentage Calculator
Turn a bread formula into grams with baker's percentages. Flour is 100 percent, enter water, salt and yeast percents to get weights and hydration.
Baking Pan Converter
Swap one baking pan for another and scale the batter to fit. Compares pan areas for round, square and rectangular pans and gives a batter scale factor.
Binary to Decimal
Convert binary to decimal online. Paste any binary number, with or without spaces, and get the exact base-10 value instantly. Runs in your browser.