Boneyard Tools

Color Mixer Tool

Pick two hex colors and blend them at any ratio to find the color in between. Slide from one color to the other and copy the result. Everything runs in your browser.

How to mix two colors

  1. Pick your first and second colors with the swatches or type hex codes.
  2. Drag the ratio slider to weight the blend toward either color.
  3. Copy the mixed hex value into your CSS or design tool.

Examples

Black and white, 50/50

#000000 + #ffffff at 0.5
#808080

Red and blue, 50/50

#ff0000 + #0000ff at 0.5
#800080

Frequently asked questions

How does the color mixer blend colors?

It interpolates the red, green and blue channels separately. At a ratio of 0.5 each channel is the average of the two colors, which gives an even blend.

Why is a 50/50 mix of black and white #808080 and not #7f7f7f?

Each channel lands on 127.5, which is exactly halfway. The result is rounded to the nearest whole number, and 127.5 rounds up to 128, which is hex 80.

What does the ratio mean?

The ratio is the weight of the second color. A ratio of 0 returns the first color, 1 returns the second color, and values in between blend them.

Can I use shorthand hex codes?

Yes. Three-digit hex like #f00 is expanded automatically, and a leading hash is optional.

Is my color sent to a server?

No. The blend is calculated in your browser, so your color values never leave your device.

Related tools