Colour mixer
Mix two colours and see what you actually get.
sRGB draws a straight line between the two colours, which for opposite hues passes through grey. OKLab bends around it and stays saturated.
Result
Mixing two colours in the obvious way, by averaging their red, green and blue, gives a result that is usually darker and greyer than either. Mixing in OKLab keeps the brightness where you expect it. Both are here, so you can see what the difference costs.
How to use it
- Enter both colours.
- Slide to set the proportion.
- Click the result to copy it.
Why use this tool
Completely private
Everything runs inside your browser. Your files and text are never sent to a server.
Free, with no limits
No sign-up, no watermarks and no cap on how many times you can use it.
Instant results
There is no upload or queue to wait for, so results appear as fast as your device can work.
Works on any device
Runs in any modern browser on phone, tablet or desktop. Nothing to install.
Frequently asked questions
- Why are there two ways to mix?
- sRGB is what most code does, and averaging channel by channel dips through darker and less colourful values on the way. OKLab is built so that equal steps look equal, so the mix stays as bright as the two colours it came from.
- Is this how paint mixes?
- No. Paint mixes subtractively, which is why blue and yellow make green on paper and grey on a screen. This mixes light, which is what a screen does.
- Can I mix more than two?
- Mix two, copy the result, then mix that with the third. The order changes the answer, exactly as it would with paint.
Related tools
Shades and tints
Build a full scale from one colour, light through dark.
CSS gradient generator
Build a gradient that stays colourful in the middle.
Colour picker
One colour, every code, and what goes with it.
Palette generator
Five colours that go together. Lock the good ones, reroll the rest.
Colour from an image
Take any colour out of a picture, or the whole palette at once.
Contrast checker
Check whether text can actually be read on its background.
Favicon generator
Turn a logo into favicon.ico and every icon a site needs.