Color Mixer
Mix two or three colors online with adjustable ratios, then copy the HEX, RGB or HSL. Free, private, no sign-up.
Screen approximation Last updated:
The color mixer
#8E578Brgb(142, 87, 139)hsl(303, 24%, 45%)Mixed in OKLab on screen. Real paint will differ.
Tints (towards white)
Base
Shades (towards black)
Click a swatch to copy its HEX.
Enter a target ratio such as 3 : 1 and a total amount to see how much of each to measure.
How to use the color mixer
- Pick your colors. Use the color picker or type a HEX code. Tick "Add a third color" if you want to blend three.
- Set the ratios. Slide each color's weight up or down. The percentage beside it shows its share of the final mix.
- Copy the result. Use the Copy buttons for HEX, RGB or HSL and paste it into your design tool, CSS or notes.
An honest note on accuracy
This is a color mixer for screens. It predicts how light colors blend on a display, and it does that in OKLab, a color space designed to be perceptually even. Paint, ink and pigment mix differently: they absorb light rather than add it, so the same two colors can give a different result on paper or canvas. Brands also use different pigments, so "red" from two tubes is rarely the same red. Treat the output as a good first guess and always test a small batch before committing to a large one.
Want the paint-versus-screen story in more depth? Read the color mixing chart and guide.
Tints and shades
A tint generator and shade generator are really the same mixer with a fixed partner: a tint mixes your color with white, a shade mixes it with black. Switch to the Tints and shades tab, choose how many steps each side, and you get an even ramp you can use as a UI color scale, a monochrome palette or a set of hover and pressed states. Click any swatch to copy it. A "tone", if you need one, is a mix with grey, which you can make in the first tab by blending your color with a mid grey like #808080.
Mixing calculator
If you already know the ratio you want, the Mixing calculator turns it into amounts. Enter three parts of A to one part of B and a total of 100 ml, and it shows the resulting color together with 75 ml and 25 ml measures. It works for any unit, so use drops, grams or teaspoons if that suits your craft. This is handy for planning small batches of paint, resin tint, icing, dye or any other medium where you mix by volume.
Tips for better mixes
- Start with the lighter color and add the darker one in small amounts. Dark colors overpower light ones quickly.
- Keep a record. Write the ratio down. A recipe such as "5 parts blue, 2 parts yellow, 1 part white" is repeatable; a guess is not.
- Use a neutral to mute. Adding a little of a color's complement, or a grey, makes it less saturated.
- Check on the real surface. Colors dry, fade and shift under different lighting.
Frequently asked questions
How does the color mixer work?
It converts each color to OKLab, a color space built to match how people see lightness and hue, averages them by your ratios, then converts back to RGB. Mixing in OKLab avoids the muddy, dark middles you often get from averaging raw RGB values.
Will mixing real paint give the same color?
Not exactly. This is a screen approximation. Real paints, inks and pigments mix by absorbing light, and every brand uses different pigments, so a blue and yellow that make a clean green on screen may make a duller green on the palette. Use the result as a starting point and test a small batch.
How do I make a tint or a shade of a color?
A tint is a color mixed with white and a shade is a color mixed with black. Open the Tints and shades tab, enter your color and pick how many steps you want. Each step is a copyable HEX value.
What do the ratio sliders mean?
They are relative weights. If one color is at 60 and another at 20, the result is three parts of the first to one part of the second. The percentages beside each slider show the share of the final mix.
Is this color mixer free and private?
Yes. It runs in your browser, needs no account, and the colors you enter are not uploaded or stored.