Mix colours by ratio and see what you would really get
This colour mixing calculator blends up to four colours by parts and shows the result as a hex code. Give each colour a number of parts, say 3 parts blue to 1 part white, and it works out the mixed colour, the percentage of each and the amount in millilitres for a total you choose.
There is no single correct way to mix colours, so the page shows the same recipe four ways: three screen mixes (OKLab, linear light and plain sRGB) and an estimated paint mix that behaves like pigments, where blue and yellow make green. Everything runs in your browser.
How to use the colour mixing calculator
- Pick each colour with the colour box or type a hex code such as #1a73e8.
- Set the parts for each colour. A colour with 0 parts is left out. Two colours are the minimum.
- Choose the mixing method: OKLab for a screen blend that looks even, linear light for real light, sRGB for what an editor does, or paint for a pigment estimate.
- Read the mixed hex, RGB and OKLCH values and the recipe in percent and ml. Copy the hex or the whole recipe.
Colour Mixing Calculator features
Four models side by side
OKLab, linear light, sRGB and a paint model for the same recipe.
Recipe in parts, percent and ml
Scales to the total amount you enter.
Honest paint estimate
A Kubelka-Munk style model, clearly labelled as an approximation.
Screen mixing: light adds
A screen makes colour by adding red, green and blue light. Mixing two light colours is a weighted average, but of what? Averaging the stored sRGB numbers is the easy method and what most editors do, yet those numbers are gamma-encoded, so the middle of black and white comes out as #808080, which is physically too dark. Averaging in linear light gives the physically correct intensity, #BCBCBC for the same pair, but it looks washed out. OKLab, published by Björn Ottosson in 2020, is built so that equal steps look equal; its midpoint is #636363 and blends keep their lightness and hue better. For CSS gradients and palettes it is usually the best default.
Paint mixing: pigments subtract
Paint works the other way round. Each pigment absorbs part of the light, so mixing removes more of it: blue and yellow both reflect some green, and the green is what is left. The standard model is Kubelka-Munk theory. In its single-constant form each colour has a ratio K ÷ S = (1 − R)² ÷ 2R of absorption to scattering at every wavelength, the ratios of the mix are added in proportion to the amounts, and the reflectance is recovered with R = 1 + K/S − √((K/S)² + 2·K/S).
To do that from an RGB value, the paint option uses spectral.js 3.0.0 (MIT licence), which builds a reflectance curve over 38 wavelengths from the colour and applies this formula. The curve is a plausible guess, not a measurement, so a real tube of ultramarine will behave differently from a screen colour with the same hex. Treat the result as a starting point and test it on paper. The model also ignores glossy or metallic finishes, opacity and drying shift. It is not Mixbox, whose licence does not allow commercial use.
Colour Mixing Calculator FAQ
What colour do blue and yellow make?
In paint, green. As screen light, yellow and blue light add to a grey or white-ish tone. Choose the paint method for the pigment answer.
How do I mix two hex colours?
Enter both hex codes, set the parts, and read the mixed hex. OKLab is the best default for an even blend on screen.
Why do the four results differ?
They use different models of what “mixing” means: perceptual, physical light, raw numbers and pigment. None is wrong; they answer different questions.
Can I use this as a paint recipe?
As a guide only. Real paints have unknown spectra, tinting strengths and finishes. Mix a small test batch and adjust.
How do I lighten or darken a colour?
Add white or black as a second colour in parts. For smooth steps from one colour to white, use the colour shades generator.
Does it need an internet connection?
Only the paint model downloads a small script, once. The three screen methods run offline.