Color Mixer

Blend two colours at the amount you choose, and read the result in hex, RGB and HSL.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

Color Mixer interpolates between two colours and reports what comes out. Both endpoints go in as any CSS colour the parser accepts — hex of 3, 4, 6 or 8 digits, one of the 148 keywords, rgb(), hsl(), hwb(), lab(), lch(), oklab() or oklch() — and the blend is walked in one of four spaces. sRGB moves along the channel values as they are stored, which is what CSS color-mix() in srgb does. Linear RGB undoes the transfer curve first, so the numbers add up the way light does. OKLab interpolates in a perceptually uniform space, so lightness moves in even increments rather than lurching. HSL turns the hue instead, taking the shorter way round the wheel.

The space is not a detail, and black to white shows why in one line. Halfway between #000000 and #FFFFFF is #808080 in sRGB, because that is the arithmetic midpoint of the stored values; in linear RGB the same midpoint is #BCBCBC, because half the light is much brighter than half the number. Mid-blue to mid-yellow spreads even further apart: sRGB drags the blend through grey, while OKLab keeps a step of the same weight at every point along the way and HSL sweeps through the hues that lie between the two.

One step gives a single blend at the Amount of B you set, and the swatch strip shows Colour A, that blend, and Colour B. Raise Steps in the scale — up to 24 — and the ratio slider disappears, because the ramp is spaced evenly from A to B with both endpoints kept. Either way the table lists each mix as a percentage of B, its hex, its RGB and HSL notations, and its contrast ratio against white; the plain-text output is the hex values on their own, one per line, ready to paste into a token file.

The honest limit is that this mixes light, not paint. Blue and yellow do not make green here — at fifty per cent in sRGB they make #808080 — because the tool interpolates numbers rather than modelling how pigment absorbs light, and there is no RYB or subtractive option to switch to. Everything also lands back in sRGB: an OKLab blend between two very saturated colours can leave the gamut, and each channel is then clamped into range on this page without a flag to say so, which usually returns something flatter than you asked for. The arithmetic runs in this browser tab, so the colours you type are not uploaded and the page keeps working with the network off.

How to use it

  1. Set the two colours. Use the Colour A and Colour B swatches, or type exactly two colours in the box, one per line. Text input wins over the swatches, and any other number of lines is refused with the count it found.
  2. Choose how much of B to mix in. The Amount of B slider runs from 0 to 100 per cent. At 0 you get Colour A back unchanged and at 100 you get Colour B, so the interesting range is everything between.
  3. Pick the blend space. sRGB for parity with CSS, linear RGB for physically correct light, OKLab for perceptually even steps, HSL when you want the blend to travel round the hue wheel rather than through grey.
  4. Ask for a ramp instead of one mix. Set Steps in the scale above 1 and the ratio is ignored: the run is spaced evenly from A to B, up to 24 swatches, with both original colours included as the first and last rows.
  5. Read the table, or copy the hex list. Each row carries the mix percentage, hex, RGB, HSL and the contrast against white. The text output drops everything but the hex codes.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Making a hover or pressed state

Mix the button colour with black or white at ten or fifteen per cent and you get a state that shifts by a measured amount rather than by eye.

Filling in a design token scale

Two agreed endpoints and a five- or nine-step ramp produce the in-between tokens in one run, with the endpoints untouched so nothing already shipped changes.

Tinting a surface towards the brand colour

A card background that is ninety-five per cent neutral and five per cent brand keeps the page calm while still reading as yours.

Deciding which space a gradient should use

Run the same pair in sRGB and in OKLab and compare the middle swatches. If sRGB goes muddy halfway, that is the argument for interpolating in OKLab.

Meeting a colour halfway between two references

When a client sends one hex and the existing site uses another, the blend at fifty per cent is a concrete third option to put in front of them.

Questions

Do the colours I mix get sent anywhere?
No. Parsing, interpolation and every figure in the table are worked out in this browser tab, so nothing is transmitted or stored and the tool still runs with the connection dropped.
Why does blue mixed with yellow give grey instead of green?
Because this interpolates colour values, the way a screen and CSS do, not the way pigment does. Paint looks green because each ink subtracts part of the spectrum; #0000FF and #FFFF00 at fifty per cent in sRGB simply average to #808080. There is no subtractive or RYB mode here, so for mixing physical paint this is the wrong tool.
Which blend space should I pick?
sRGB when you need to match what CSS color-mix() in srgb will do. Linear RGB when you are reasoning about light, such as compositing or exposure. OKLab when the steps of a ramp should look evenly spaced. HSL when you want the blend to turn through the intervening hues; saturation and lightness are still interpolated straight between the two, so a blend towards a grey still loses saturation.
Can I mix three or more colours at once?
No. The tool takes exactly two, and a text box holding one line or three is rejected rather than guessed at. For a multi-stop run use Gradient Generator, and for a scale of tints and shades built from a single colour use Color Shades.
Why did an OKLab blend come back duller than the colours I gave it?
OKLab can describe colours sRGB cannot show. When the interpolation strays outside the gamut, each channel is clamped back into range, which flattens saturation and can shift the hue. This page does not mark that; Color Picker labels a clipped value if you want to confirm it.
What is the On white column telling me?
It is the WCAG 2 contrast ratio between that mix and white. It is computed from the blend's own channel values, so a translucent mix reads higher than it will actually look once something shows through. For a real foreground and background pair, test it in WCAG Contrast Checker.
Does it handle transparency?
Yes. Alpha is interpolated alongside the colour, so a blend between an opaque and a semi-transparent colour lands in between on both counts, and the hex gains its alpha byte. The HSL column is written without alpha.
Can I keep comments in the input?
Yes. Blank lines are skipped, and so are lines starting with // or with a hash followed by a space — a hash against a value, as in #3B82F6, is still read as a colour.

Related tools