About the Color Mixer
Mixing two colours gives you a tint, a midpoint for a gradient stop, or a blended tone. This tool interpolates between the colour in the pane and the one in the toolbar at the ratio you set, and shows the result as HEX, RGB and HSL with a swatch. At 50 percent you get the exact midpoint; move the ratio toward either colour for a tint or shade of one.
Because the blend happens channel by channel in RGB, two strongly different hues meet in a muddy middle rather than at the colour paint would give you. Red and green average to a dull olive, since 255, 0, 0 and 0, 255, 0 meet at 128, 128, 0. That is the correct answer for a CSS gradient, which interpolates exactly the same way, but it is not pigment behaviour, so if a midpoint looks dead, mix in two steps through a third colour you choose yourself.
A practical use is working out the intermediate stops of a multi-step gradient by hand, so the values can be stored as design tokens rather than recomputed by the browser on every paint. It is useful for building a gradient, softening a colour by mixing toward white or grey, or finding a colour halfway between two brand shades. For a full set of lighter and darker variants, use the Shades Generator; for a harmonious scheme, the Palette Generator.
How to use
- Enter the first colour in the pane.
- Enter the second colour and the mix percentage in the toolbar.
- Copy the resulting colour.
Common questions
- What does 50% mean?
- An even blend, the exact midpoint. A lower value keeps more of the first colour; higher keeps more of the second.
- In which space are colours mixed?
- In RGB, which is the common approach for gradient stops. Results are shown in HEX, RGB and HSL.
- Can I mix toward white for a tint?
- Yes, set the second colour to white and choose the amount.