colour tool
Colour mixer online
Pick two colours, set the ratio, and this colour mixer shows the result three ways: a plain RGB average, a paint-like mix in OKLCH, and a CMYK ink approximation, each with its hex. A strip under each result shows every step from the first colour to the second.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Set the two colours
Type a value into each field or use the swatch pickers. Swap reverses them.
- 2
Set the ratio
Drag the Mix slider. The label reads the share of each colour, such as 70% first, 30% second.
- 3
Compare the three results
RGB average, OKLCH and CMYK each show a swatch, the hex, RGB and CMYK figures, and a strip with the current ratio marked.
- 4
Copy what you need
Copy a result's hex, or copy the two CSS color-mix() lines to let the browser do the same mix.
Three ways to mix, three answers
The RGB average blends the stored red, green and blue numbers, which is what most online mixers and the srgb mode of CSS color-mix() do. The OKLCH mix blends lightness, chroma and hue separately, taking the short way round the hue wheel. The CMYK mix converts both colours to cyan, magenta, yellow and black percentages, averages those, and converts back, which approximates two inks printed over each other.
Why blue and yellow make grey on a screen
Light adds up and paint takes away. A screen mixes by averaging the light it emits, so a strong blue and a strong yellow average to a grey, because between them they cover the whole spectrum. Paint absorbs light, and blue and yellow pigments together absorb everything except green. The OKLCH mix keeps chroma and travels through the hues between the two, so blue and yellow pass through teal and green. No formula on this page models pigment chemistry.
The same mix in CSS
Modern browsers can mix colours themselves with color-mix(), defined in CSS Color 5. The panel under the results writes two versions for your colours and ratio, one in srgb that matches the RGB average and one in oklch that matches the OKLCH result. Using the function keeps the relationship in your code, so changing the brand colour updates every mix built from it.
Where a mixed colour goes
Mixes are useful for in between colours: a hover state halfway between a button colour and white, a chart series between two brand colours, a muted background that still belongs to the palette. In the flyer builder any text can take a custom hex, so a mixed colour can go straight onto a heading. For a theme, put it in the brand kit as the Secondary or Accent colour.
Limits worth knowing
Screen mixing is not pigment mixing; the OKLCH column is the nearest of the three to paint and still only an approximation. The CMYK figures carry no ICC profile, so a printer will produce something different. Nothing leaves this page: the mixing is arithmetic in your browser, nothing is uploaded and nothing is stored, ever. Both colours and the ratio sit in the address bar, so a copied link reopens the same mix.
Limits
- Screen mixing is not pigment mixing; the OKLCH mix is the closest a screen can show, and it is still not paint.
- The CMYK figures use the plain arithmetic conversion with no ICC profile, so they are a rough guide, not a print value.
- An OKLCH mix that lands outside the sRGB gamut has its chroma pulled back, so it may be slightly calmer than the maths alone suggests.
What it does not do
- It does not mix three or more colours at once. Mix two, then mix the result with the third.
- It does not model real paint brands or pigment loads.
- It does not produce spot colour or Pantone matches.
Questions people ask
Which of the three results should I use?
For anything on a screen, the OKLCH result usually looks most natural, because it keeps saturation and lightness moving smoothly. Use the RGB average when you need to match a browser that blends in sRGB, such as an older gradient. Use the CMYK figure only as a talking point with a printer, never as a final ink value.
How do I mix a colour with white or black?
Set the second colour to white or black and move the ratio. Mixing with white makes tints and with black makes shades. If you need a full set of steps at once, the tints and shades generator makes ten of each in even perceptual steps, with contrast grades for text on every one.
Can I get the colour halfway between two brand colours?
Yes, leave the slider at 50%. The three results will differ most when the two colours sit far apart on the hue wheel. For a palette, the OKLCH midpoint is usually the one that still feels like a brand colour, while the RGB midpoint of two strong colours often turns dull or greyish.
Does color-mix() work in every browser?
Current versions of Chrome, Edge, Firefox and Safari all support color-mix(), and have since 2023. Older browsers drop the whole declaration, so set a plain hex fallback on the line before it. The hex values on this page are exactly that fallback, worked out the same way the browser would mix them.
Why are the CMYK numbers different from my design app?
Design apps convert to CMYK through an ICC profile that describes a real press, its paper and its total ink limit, and they swap some colour for black ink. This page uses the plain formula with no profile, so its percentages are only a sketch. Ask your printer for the profile they use and convert in your design app.
Put the mixed colour on a flyer
Take what you made here into flyers.
Create a flyer with OneCraftMore tools like this
- CSS gradient generatorCSS gradient generator: set 2 to 5 colour stops, an angle and a linear, radial or conic type, then copy the CSS or download a PNG at any size.
- Tints and shades generatorTints and shades generator: 10 lighter and 10 darker steps of any colour, with hex values and the contrast of black and white text on each.
- Colour name finderColour name finder: enter a hex or RGB value, or pick from the screen, and get the nearest CSS colour name and the nearest of 1,566 named colours.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
Background reading: the question page on this.
Written and checked by the OneCraft team. Last checked .