Color Mixer

What is Online Color Mixer?

Color Mixer is a free online tool for blending two colors and find the interpolated colors just between these two. You can either enter a HEX color or an RGBA color with opacity as input and the tool calculates the mixed color by making an interpolation. It finds the color just between these two colors by blending these HTML colors.

You can define step size for interpolation, that means you can find all colors between 2 HTML colors in n steps. You can select step size between a range from 1 to 10. By using steps, you can get a color spectrum between 2 colors or find shades of a tone.

Here is an image showing how 2 colors are mixed. When blue and red are blended, you get purple. In terms of rgba, blue is rgb(0, 0, 255) and red is rgb(255, 0, 0). When these 2 colors mixed, the result in rgba is rgb(128, 0, 128) which is the color code of purple. It is basic interpolation.

How Color Mixer Works on Blending Colors

The situation is a little complicated when alpha (opacity) of colors is different than 1. But, since there is a math in color coding, it's not rocket science. The tool works like an online HTML color blender, and it can mix either solid or opaque colors.

How to use Online Color Mixer?

You can mix two colors and get the color code of mixed colors by following these steps.

1. Select 2 colors that you want to mix. It can be either a solid color or a color with opacity.
2. Select step size from list between 1 and 10. It defines the number of colors between the colors you choose.
3. Click "Mix Colors" button for seeing the mixed color codes and its color preview.
4. Results will be shown in 3 color code formats: HEX, RGBA and HSLA. Click on color codes to copy their values on your clipboard. Also, you can view whether the color is light or dark.

Frequently asked questions

What does mixing two colours give me?

The steps between them. Useful for finding a midpoint that belongs to both, and for building a ramp between two brand colours rather than inventing the colours in the middle.

Can I mix with transparency?

Yes. RGBA values with their alpha are accepted, and the alpha is interpolated along with the colour.

Why does the middle sometimes look muddy?

Because the two colours are near-opposite hues and the path between them passes through grey. There is no fix in the mix itself — if the midpoint has to stay saturated, you need a third colour to route it through.

Is this the same as a gradient?

The same arithmetic, a different output. A gradient is a smooth CSS background; this hands you the individual values, which is what you want for discrete steps like a chart scale or a set of tags.

What if I want a gradient instead?

The CSS Gradient Generator produces the CSS, and the Color Shades Generator ramps a single colour rather than bridging two.