Color Mixer

How to mix two colors

1. Set a start color and an end color with the two pickers, or paste HEX values.
2. Drag the mix slider to move between them and read the blended result.
3. Choose RGB blend or HSL blend depending on how you want the colors to travel.
4. Set the number of blend steps, then copy any step or copy all at once.

What is color mixing?

Color mixing takes two colors and produces the colors that sit between them, either a single midpoint or an even ladder of steps. On screen this is done by averaging the two colors channel by channel, which is closer to mixing light than mixing paint, so blending blue and yellow gives a gray-green rather than the green you would get with physical pigment.

What is the difference between RGB and HSL blending?

The blend space changes the path between your two colors, and it matters more than people expect:

For two similar colors, RGB is fine. For two distant hues, HSL usually keeps the in-between steps brighter and more pleasant.

What color do two colors make?

• Red and yellow on screen blend through orange.
• Blue and yellow in RGB pass through a muted gray-green, not a bright green.
• Two tints of one hue give a clean midpoint of the same color.
• A bright color and its opposite cross through gray near the middle in RGB blend.

What are the in-between steps used for?

The blend ladder is handy whenever you need an even transition rather than just a midpoint. Designers use it to build smooth color stops for a CSS gradient, to find a tone that bridges two brand colors, or to space steps evenly in a data visualization. For a light-to-dark ramp of one color instead, the Shades Generator is the better tool.