How to use the Color Mixer
- Enter or pick Colour A and Colour B.
- Choose how many steps you want (including both ends).
- Pick an interpolation space — OKLab gives the smoothest, most even blend.
- Click a swatch to copy one colour, or copy the full set as CSS variables,
color-mix()or JSON.
What does a colour mixer do?
It calculates evenly spaced colours between two endpoints. With 5 steps between blue and amber you get blue, three transitional colours and amber — useful for multi-stop gradients, data-visualisation scales, progress indicators, subtle borders between two surface colours and themed hover states.
Why the interpolation space matters
| Space | Result | Best for |
|---|---|---|
| OKLab | Perceptually even steps, no muddy middle | Most UI work, gradients, chart scales |
| OKLCH | Travels around the hue wheel, keeps colours vivid | Rainbow-like and brand gradients |
| sRGB | The classic browser default; mid-points can turn grey or dark | Matching legacy designs |
| Linear sRGB | Physically correct light mixing, brighter mid-points | Simulating real light blending |
| HSL | Hue-based, uneven perceived lightness | Quick hue sweeps |
Mixing complementary colours like blue and yellow in sRGB produces a dull grey in the middle; OKLab keeps the transition clean. That is why modern CSS lets you choose the space explicitly.
Mixing colours in native CSS
All current browsers support color-mix() and interpolation hints in gradients, so you can often skip hard-coded values entirely:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Generated steps are still handy for design tools, email templates, charts drawn in canvas/SVG and anywhere CSS functions aren’t available. To build a full light-to-dark scale from one colour, use the Tailwind Color Generator; for gradient code with multiple stops, the CSS Gradient Generator.
Tools that pair well with the Color Mixer
- Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
- APCA Contrast Checker — Calculate the APCA lightness contrast (Lc) between text and background, see which uses it’s suitable for, and compare it with the classic WCAG 2 ratio.
- Color Blindness Simulator — Upload a screenshot or design and see it through eight types of colour vision deficiency side by side — or test a palette for colours that become indistinguishable.
Frequently asked questions
Which interpolation should I use?
Are the end colours included in the step count?
What is color-mix() in CSS?
color-mix(in oklab, red, blue 30%) blends two colours in the browser. It is supported in all current browsers and works with CSS variables, so mixes update automatically with your theme.