Color Mixer

How to use the Color Mixer

1. 1Enter two hex colours and a percentage.
2. 2Pick the units or options from the menus if the mixed colour tool offers them.
3. 3Read the mixed colour in the large result box.
4. 4Look at the extra rows for related figures.
5. 5Press Copy result to keep the answer.

When you need the mixed colour

Designers use it to find in-between shades, build gradients and create hover or disabled colours from brand colours.

Mixing in RGB averages light, not paint, so blue and yellow give grey and not green. For paint-like results, mix in a different colour space.

How the mixed colour is worked out

Each of red, green and blue is mixed separately: result = first × (1 − t) + second × t, where t is the share of the second colour. Mixing #E4572E (228, 87, 46) and #2E86E4 (46, 134, 228) equally gives (137, 111, 137), which is #896F89. At 0 percent you get the first colour and at 100 percent the second.

Every answer on this page comes from that one rule, so you can check any result by hand with a calculator. The figures shown underneath, such as other units, are conversions of the same answer.

• Live swatches
• Slider for the mix
• Hex and RGB output

Mistakes to avoid with mixed colour

Enter hex codes with 3 or 6 digits; the # is optional. The tool mixes in standard RGB, without gamma correction.

On phone and computer

On a phone, type into the boxes one after another and read the mixed colour underneath; Copy result puts it on the clipboard for a message or a note. On a computer the inputs sit on the left and the answer on the right, so you can change one figure and watch the mixed colour move. The color mixer works the same on both.

Checking your mixed colour by hand

A good habit is to test the color mixer with a case you already know. Mixing #E4572E (228, 87, 46) and #2E86E4 (46, 134, 228) equally gives (137, 111, 137), which is #896F89. At 0 percent you get the first colour and at 100 percent the second.

If your own figures give a surprising answer, repeat the working yourself: Each of red, green and blue is mixed separately: result = first × (1 − t) + second × t, where t is the share of the second colour. Small differences usually come from rounding, from mixing units, or from a typing slip in one of the inputs. Once you have a mixed colour, the next step is usually its code. Use the Color Converter to see it as HEX, RGB and more, and the Image Color Picker to grab shades from an existing image. The Random Color Generator is handy when you need a spark of inspiration.

Features

• RGB mixing is not paint mixing
• 3 or 6 digit hex
• Midpoint is 50%
• Clear messages when the mixed colour inputs make no sense
• Copy the result with one tap
• Private: nothing is uploaded

Frequently asked questions