Color Mixer

Pick two colours and a percentage and this tool blends them, giving you the result in hex, RGB and HSL plus five evenly spaced steps between them. The steps are especially useful as stops for a gradient or a transition.

How to use it

1. Enter the first and second colours.
2. Move the slider to set how much of the second colour to use.
3. Read the mixed colour.
4. Copy it, or use the blend steps.

When it helps

• Finding a colour halfway between two brand colours.
• Making gradient stops.
• Muting a colour by mixing it with grey.
• Experimenting with palettes.

Good to know

• Mixing happens in RGB, which is not how paint behaves; blue and yellow won't give green here.
• Mixing with white gives a tint and mixing with black gives a shade.
• Named colours such as tomato and navy are accepted.

How colours are blended

The tool mixes each of the red, green and blue channels linearly. At 50 percent, the result is the average of the two colours' channels. At 25 percent it's three quarters of the first plus one quarter of the second. The five steps shown are blends at 0, 25, 50, 75 and 100 percent.

Because screens add light, this isn't like mixing paint, where pigments absorb light and blending yellow and blue gives green.

Worked example: a halfway colour

Mix amber #f6b82f with blue #2563eb at 50 percent. The red channel is (246 + 37) divided by 2, which is about 142, green is (184 + 99) divided by 2, about 142, and blue is (47 + 235) divided by 2, 141. The result is #8e8e8d, a neutral grey, because the two colours are close to opposites.

That's a useful lesson: mixing complementary colours gives grey, which is how artists mute colours.

Using blends in design

Blend steps make smooth gradients, shadows tinted with a background colour, and hover states halfway between two brand colours. Mixing a brand colour with white or black at low percentages gives tints and shades.

For gradients, consider that RGB blends can look muddy in the middle, and try inserting an extra stop.

Mixing in other colour spaces

Mixing in HSL or Lab can give more natural results, such as keeping saturation when blending two bright colours. CSS now supports color-mix(), which lets browsers mix colours in different spaces directly.

The simple RGB mix here matches what most design tools do by default.

Practical mixing tips

To soften a harsh colour, mix it 20 percent with white or grey. To make text on a coloured background, mix the background with black until the contrast works. To create a border colour, mix the background with a darker tone at 10 to 15 percent.

Small amounts often give the best results.

Questions