Color Mixer
Mix 2 or 3 colors in any proportion, like paint or light, to get the resulting color, or blend two colors in up to 10 steps. Copy HEX, RGB, HSL or CMYK.
Pick 2 or 3 colors and set how much of each goes in: the mixed color is computed instantly in your browser. Click the result or any value to copy it.
Pick two colors and a step count: every shade in between is computed instantly in your browser.
About Color Mixer
The Color Mixer shows you the color you get when you mix two or three colors together. Pick your colors, set how much of each goes into the mix, and the resulting color appears instantly with its HEX, RGB, HSL and CMYK values, along with a recipe bar showing the share of every color.
Three mixing models answer different questions. Paint mixes like real pigments, so blue and yellow make green and a little black goes a long way. Light averages colors the way screens and colored lights blend them, so red and green make yellow. Perceptual averages them in the OKLab space used by CSS color-mix(), for smooth, even results in UI and design work.
A second view, Blend steps, fades a start color into an end color across up to ten in-between shades, in RGB or HSL, with a gradient preview and a ready-to-paste CSS gradient. Everything runs in your browser with no server involved.
How to use Color Mixer
- Open the "Mix colors" view and pick two colors, or add a third one with "Add a color".
- Set the amount of each color: the percentage next to it shows its share of the mix.
- Choose the mixing model: Paint, Light or Perceptual.
- Click the mixed color or any of its values to copy it, or use "Copy recipe" to keep the proportions.
- Switch to "Blend steps" to build a gradient of up to 10 shades between two colors.