How to use the Color Mixer
- Choose the colors you want to mix. Add up to six with Add color.
- Set how much of each color goes in with its slider, and pick a blend space.
- Choose how many steps to generate, then click any step to copy it, or copy them all as HEX or CSS variables.
- Save a mix to keep it in your browser, or open the steps in the palette or gradient generator.
Color Mixer features
- Mix two to six colors, each with its own amount
- Five blend spaces: OKLab, OKLCH, sRGB, linear light and HSL
- 3 to 20 evenly spaced steps between the colors
- CSS color-mix() code that matches the result
- Copy all steps as HEX codes or CSS variables
- Open the steps in the palette or gradient generator
- Saved mixes and your current mix kept in your browser
Mix colors online and see the result instantly
The color mixer blends two or more colors and shows you the exact result, along with every step in between. Choose up to six colors, set how much of each goes into the mix, and copy the HEX code of the blend or of any intermediate step. It answers questions like "what color do blue and yellow make on screen?" or "what is halfway between my brand color and gray?" in a second.
It is useful for building color scales, finding a softer version of a color, picking a hover color between two states, or creating the stops of a smooth gradient.
Why the blend space matters
Mixing colors on a screen is a calculation, and there is more than one way to do it. The blend space decides which path the mix takes between your colors, and it can change the result a lot:
| Blend space | How it behaves | Best for |
|---|---|---|
| OKLab | Follows human perception, so midpoints stay clean and evenly spaced | UI color scales, gradients, most everyday mixing |
| OKLCH | Travels around the hue wheel while keeping lightness and colorfulness even | Vivid blends between different hues |
| sRGB | Averages the red, green and blue numbers directly | Matching older tools and default CSS gradients |
| Linear | Averages actual light intensity, like overlapping light beams | Physically realistic light blending and blur |
| HSL | Moves around the classic color wheel | Rainbow-like transitions |
Try mixing blue and yellow in each space to see the difference. In sRGB the midpoint is a flat middle gray, in linear light it is a lighter silver, in OKLab it is a soft grayish blue, and in OKLCH and HSL it passes through teal and green, because those spaces travel around the hue wheel.
Mixing light is not mixing paint
Screens create color by adding light, while paint creates color by absorbing it. That is why digital mixing does not always match what you learned in art class: blue and yellow paint make green, but in sRGB blue and yellow light average out to gray. If you want results that feel closer to paint, use the OKLCH or HSL blend spaces, which move through the hues in between. For color schemes based on artists' color theory, the Complementary Colors also offers the traditional RYB color wheel.
Use the mix in CSS
Modern browsers can mix colors themselves with the CSS color-mix() function. The mixer writes the matching code for your colors and amounts, for example:
background: color-mix(in oklab, #4F46E5 70%, #F59E0B);That means you can keep your original colors in variables and let the browser compute the blend, which is handy for hover states and theme variations. The HEX value of the result is shown as well, for tools that do not support color-mix().
Generate the steps in between
Set the number of steps (from 3 to 20) to get an evenly spaced scale from your first color to your last. Click any step to copy it, copy the whole list as HEX codes or CSS variables, or send it straight to the Color Palette Generator or the CSS Gradient Generator to keep working on it.
Save your favourite mixes
Press Save mix to keep the colors, amounts and blend space in your saved mixes. They are stored in your browser, so they are still there next time, and nothing is uploaded. Your current mix is remembered automatically, too.
Ideas for using the color mixer
- Create a muted version of a bright brand color by mixing in 20–30% gray.
- Find a hover color by mixing a button color with 10–15% black or white.
- Build a diverging chart scale by mixing two contrasting colors through a neutral middle.
- Make a tinted background by mixing your accent color with 90% white.
To create lighter and darker versions of one color automatically, use the Shades & Tints Generator.
Color Mixer: frequently asked questions
Which blend space should I use?
OKLab gives the most natural results for gradients and UI color scales. sRGB matches older tools and CSS gradients by default. HSL travels around the color wheel and can pass through other hues.
Is this the same as mixing paint?
No. Screens mix light additively, so blue and yellow give gray in RGB rather than green. Use the result as a digital blend.
What color do two colors make when mixed?
Add both colors and leave the amounts at 50%. The mixed color and its HEX code appear at once. The result depends on the blend space, so compare OKLab and sRGB.
How do I mix colors in CSS?
Use color-mix(), for example color-mix(in oklab, #4F46E5 70%, white). It works in all current browsers. The mixer writes this code for your colors.
Can I mix more than two colors?
Yes, up to six. Each color has its own amount slider, and the amounts are balanced to make up the whole mix.
Are my saved mixes private?
Yes. They are stored in your browser's local storage on this device and never uploaded.