UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free online color mixer does
Mixing colours is one of the oldest design skills and one of the least predictable. Blue and yellow make green in a paint box but grey on a screen, and a pink made by adding white can look dull or fresh depending on how you blend. This free online color mixer shows the result of mixing two to six colours with adjustable amounts and lets you compare six different mixing methods side by side, so you can choose the one that suits the job.
Beyond a basic blend, the tool builds smooth steps between two colours, includes a mixing chart that answers questions like “what colors make brown” with real values, and a paint recipe finder that searches for the whole-part mix closest to a target colour. Every result comes with HEX, RGB, HSL, CMYK and OKLCH codes, and you can export or print it.
How to mix colours with this tool
- Choose the method. OKLab is a good default for smooth, natural blends.
- Set your colours. Use the colour boxes, type any code, or paste a CSS name. Add up to six rows.
- Set the amounts. Drag each slider. The percentages show each colour's share, and the circles in the picture grow or shrink to match.
- Read the result. The large swatch shows the mix, and the cards below show the same mix in all six methods.
- Go further. Use Steps between two for a series, Match a colour for a recipe and Mixing chart for the classic combinations.
- Copy or export. Use Copy on any value, or download CSS, JSON or text.
Additive and subtractive colour mixing
Additive mixing adds light. A screen starts black and adds red, green and blue light, so red and green make yellow, green and blue make cyan, red and blue make magenta, and all three make white. Subtractive mixing removes light. Paint, ink and dye start with a white surface and each pigment absorbs part of the light, so adding more pigment makes the result darker. In print the primaries are cyan, magenta and yellow (plus black, which is the K in CMYK). In traditional painting they are red, yellow and blue.
Screens cannot copy real pigments perfectly. If you average the RGB values of blue and yellow you get a mid grey, because the two colours have opposite strengths in each channel. A real blue and yellow paint overlap in the green part of the spectrum, which is why they look green. This tool gives you several maths models to approximate different situations, and the CMYK option leans towards the ink-like result.
The six mixing methods explained
| Method | How it blends | Best for |
|---|---|---|
| OKLab | Averages in a space built around human vision | Smooth, natural-looking blends and steps |
| sRGB average | Averages the red, green and blue numbers | Matching what most online mixers and design apps do |
| Linear light | Averages physical light intensity | Realistic light mixing, brighter midpoints |
| CIE Lab | Averages in the classic perceptual space | Perceptual blends with a long track record |
| OKLCH | Averages lightness and chroma and blends hue as an angle | Keeping mixes vivid instead of greyish |
| CMYK | Averages ink percentages | An ink-like, darker, subtractive feel |
A quick test shows the differences. Mixing pure red and pure green in equal parts gives a dark, muddy olive in sRGB, a brighter yellow-olive in linear light and a golden tone in OKLCH. None is wrong, because each answers a different question. The cards under the result let you see all six at once. The same logic is behind gradients, so the CSS Gradient Generator offers the same colour spaces.
Color mixing chart: what colors make what
| Mix | Result | Notes |
|---|---|---|
| Red + yellow | Orange | More yellow gives amber, more red gives vermilion |
| Yellow + blue | Green | Sensitive to the exact blue and yellow |
| Red + blue | Purple | Magenta-leaning reds give violet |
| Red + green | Brown | Complements neutralise each other |
| Orange + blue | Brown or grey | Complements again |
| Red + white | Pink | The more white, the paler |
| Blue + white | Light blue | Sky blue to baby blue |
| Black + white | Grey | Equal parts give mid grey |
| Yellow + black | Olive green | A classic dark green |
| Red + black | Maroon | Dark red |
| Blue + green | Teal | Cyan-leaning blues give turquoise |
| Red + yellow + white | Peach | Soft, warm skin tones |
The Mixing chart tab in the tool calculates these combinations with real paint-like colours and the method you choose, so you can see exactly where the maths agrees with the traditional answer and where it does not.
Steps between two colours and gradients
The Steps between two tab blends colour A into colour B in an even series of three to 21 swatches. Use it to build a scale, a heat-map legend, a chart palette or a set of shades for UI states. Mixing in OKLab keeps the middle steps lively, while sRGB can dip into grey when the two colours are opposites. To turn the steps into a smooth background, send the end colours to the CSS Gradient Generator.
For lighter and darker versions of a single colour, mixing with white and black is the classic approach, and the Tints and Shades Generator does it with a full 50 to 950 scale.
Mixing paint: the recipe finder
Painters, crafters and model makers often need to hit a given colour with the paints on the table. The Match a colour tab lets you tick the paints you own (titanium white, ivory black, cadmium red, cadmium yellow, ultramarine and phthalo blues, phthalo green, magenta, burnt sienna, yellow ochre or a custom colour), enter the target and search every combination of whole parts up to your chosen total. It lists the five closest recipes, with a colour difference score where under 2 is practically identical and under 5 is very close.
Treat the recipe as a starting point. Pigments differ by brand, binder and thickness, and real mixes are spectral. Mix a small sample, let it dry if you use acrylic, which often darkens, and adjust by eye. Keep notes of the parts you used so you can repeat the colour later.
Using mixed colours in design
- UI states. Mix a brand colour with white for hover and with black for pressed states.
- Softer palettes. Mix each palette colour with a little of one shared colour to make them feel related.
- Neutrals with character. Mix grey with a touch of your brand colour for tinted neutrals that look intentional.
- Data visualisation. Build a ramp between two colours for a sequential scale.
- Brand matching. Mix to reach a code from a style guide, then read it in other formats with the HEX to RGB Converter.
If you need harmonious starting colours first, use the Color Wheel or the Color Palette Generator, and the Color Picker to read any colour from a screen.
To mix colours that come from a photo, pick them first with the Image Color Picker.
Tips for better colour mixes
- Add the darker colour a little at a time. Dark colours dominate quickly.
- Use complements to neutralise a colour instead of black, which can look flat.
- When mixing for screens, try OKLab or OKLCH if sRGB looks muddy.
- Check text contrast on mixed backgrounds with the Color Contrast Checker.
- Save the final HEX code as soon as you like a result.
- Give the colour a name with the Color Name Identifier.
Accuracy, limits and responsible use
The tool uses standard colour conversions and weighted averages, runs entirely in your browser and works in the sRGB colour space, so extreme colours are clipped to what a screen can show. The CMYK model is a simple conversion and not a printer profile. The paint recipe finder searches whole-part combinations on screen, which is not the same as mixing physical paint. This free online colour mixer is a fast, reliable guide, and the final test is always a real sample on your own materials.
Related free tools
Use these free online tools together with this one:
- Create frosted-glass UI effects with the glassmorphism generator.
- Convert a colour code to RGB with the HEX to RGB converter.
- Build lighter and darker versions of a colour with the tints and shades generator.
- Test whether a colour change made a difference with the A/B test calculator.
- Convert a colour reference image to another format with the image converter.
- Style post text to go with your colours using the fancy text generator.
Frequently asked questions
How do I mix colors online?
Choose two or more colours, set how much of each you want with the sliders and read the result below. The mix updates as you move the sliders and shows the HEX, RGB, HSL and CMYK values.
What does mixing red and blue make?
On the traditional painter's wheel red and blue make purple. The tool shows what each mixing method gives. Light-based methods give a bright magenta-purple, while ink-like methods give a darker purple.
What colors make brown?
Brown is made by mixing all three primaries, or a colour with its complement, such as red and green or orange and blue. Add a little black or yellow ochre to adjust it. The Mixing chart tab shows examples.
What two colors make green?
Blue and yellow make green. More blue makes a deeper teal-green and more yellow makes a fresh lime. Try it with two colour rows and move the sliders.
What colors make orange, pink, purple or grey?
Red and yellow make orange, red and white make pink, red and blue make purple, and black and white make grey. Open the Mixing chart tab for these and more, with the actual HEX results.
Why does mixing blue and yellow not give green on a screen?
On screens colours add light, and averaging blue and yellow RGB values gives a grey. Paint takes light away, which is why blue and yellow paint look green. Pick a method that suits your task.
What is the difference between additive and subtractive mixing?
Additive mixing combines light, as on screens, and its primaries are red, green and blue. Subtractive mixing combines pigments that absorb light, as in paint and print, and its primaries are cyan, magenta and yellow or red, yellow and blue.
Which mixing method should I choose?
Use OKLab for smooth, natural blends, sRGB average to match what most tools do, linear light for physically correct light mixing, OKLCH to keep colours vivid, Lab for classic perceptual mixing and CMYK for an ink-like feel.
Can I mix more than two colours?
Yes. You can mix up to six colours, each with its own amount. The result is a weighted blend, so a colour set to 80 counts four times as much as one set to 20.
How do I find the colors between two colors?
Open the Steps between two tab, choose colour A and colour B, and set the number of steps. You get an even series of blends that you can copy or export, like a gradient broken into swatches.
How do I match a colour with paint?
Open the Match a colour tab, choose the paints you own, enter the target colour and read the best recipe in whole parts. Mix a small test sample, compare it by eye and adjust.
How accurate is the paint recipe finder?
It finds the recipe that gives the closest result on screen under the chosen method. Real paints mix by their spectra, so treat the recipe as a starting point and refine it with a test mix.
How do I mix a lighter or darker version of a colour?
Mix it with white for a lighter tint, with black for a darker shade and with grey for a tone. For a full series, use the Tints and Shades Generator.
Can I mix HEX codes?
Yes. Type any HEX code, or use the colour picker, in each row. You can also paste rgb(), hsl() and CSS colour names.
Can I download the mix?
Yes. Copy or download the colours as CSS variables, JSON or plain text from the Export tab.
Can I print the result?
Yes. Print / save mix creates a one-page sheet with the inputs, the result, the steps and the paint recipe if you made one. Only the mix is printed, not the whole page.
Is this colour mixer free?
Yes. It is a free online colour mixer with no sign-up, and nothing you enter is sent to a server.
Sources and further reading
- Wikipedia, Color mixing.
- Wikipedia, Additive color and Subtractive color.
- Björn Ottosson, A perceptual color space for image processing.
- W3C, CSS Color Module Level 4, including the color-mix() function.
- Bruce Lindbloom, Useful colour equations.
- Wikipedia, CMYK color model.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.