CSS color-mix() Preview (Interpolation Space Comparison)
Color
Modern CSS lets you mix two colors with `color-mix(in <space>, A <p>, B)`, and the interpolation space you pick changes the result dramatically. Red mixed with blue in `srgb` gives muddy purple-gray; the same mix in `oklch` produces a vibrant magenta; in `hsl` it sweeps through cyan because hue interpolates the short way around the wheel. This tool renders the same mix in all eight commonly-used spaces side by side — `srgb`, `srgb-linear`, `hsl`, `hwb`, `lab`, `lch`, `oklab`, `oklch` — using the browser's native `color-mix()` so what you see is what your stylesheet will produce. Each card shows a large swatch at the current mix percentage, the resolved sRGB hex (computed by drawing the color onto a 1×1 canvas and reading the pixel back), and an 11-step gradient strip showing the full path from A to B. Adjust the percentage slider and watch all eight paths animate. Click any card to copy the matching CSS declaration.
About interpolation spaces
color-mix() linearly interpolates the two colors in whatever space you name. sRGB goes through desaturated grays. srgb-linear matches physical light addition (photo compositing). HSL/HWB/LCH/OKLCH interpolate hue around a wheel — the shorter arc by default. OKLab/OKLCH (Björn Ottosson, 2020) are perceptually uniform — equal numeric steps look like equal visual steps. The hex below each swatch is read back from a 1×1 canvas after the browser resolves the mix, so it matches getComputedStyle().
How to use
- Pick color A and color B with the pickers or paste a hex.
- Drag the percentage slider — that's the amount of A in the mix (so 30% means 30% A and 70% B).
- Compare the eight cards: the swatch is the resolved color, the strip shows the A→B gradient in that space.
- Click the copy icon on any card to grab the `background: color-mix(in <space>, ...);` declaration.
- Try the presets — red↔blue and yellow↔blue are the classic 'why does srgb look bad' cases.
Frequently asked questions
- Why does the result look completely different in each space?
- Linear interpolation (the math `color-mix()` does) is a straight line through whatever coordinate system you pick. In sRGB that line goes through unsaturated gray midpoints because the sRGB cube has gray on its main diagonal. In OKLCH the line stays at constant perceived lightness and rotates through hue, so it stays vivid. In HSL the line takes the shortest path around the hue wheel, which can sweep through colors that aren't between A and B at all. None is 'wrong' — they're different geometries.
- Which space should I use?
- For most UI work `oklch` or `oklab` give the best perceptual results — gradients stay even-brightness, mixes stay vivid, no muddy midpoints. `srgb-linear` is correct for physical light mixing (photo compositing). `srgb` matches what older tools and pre-2023 CSS did. `hsl` is fine for hue-based palettes but only when A and B share saturation/lightness. Avoid plain `srgb` for vivid color pairs unless you specifically want the muted look.
- How accurate is the hex value shown?
- It's exactly what the browser computes. The color expression is set as a canvas `fillStyle`, a 1×1 pixel is rendered, then `getImageData()` reads back the actual sRGB bytes. So the hex you see is the same hex `getComputedStyle()` would resolve for that mix — to within rounding (±1 per channel from 8-bit canvas quantization).
- What about hue-shortest vs hue-longest?
- CSS supports `in oklch longer hue` / `shorter hue` / `increasing hue` / `decreasing hue` modifiers for hue-based spaces (hsl, hwb, lch, oklch). This tool uses the default (shorter hue) to keep the cards uncluttered. If you need longer-hue interpolation you can append the modifier yourself: `color-mix(in oklch longer hue, A 50%, B)` — same colors, opposite direction around the wheel.
- Browser support?
- `color-mix()` ships in Chrome/Edge 111+ (Mar 2023), Safari 16.2+ (Dec 2022), and Firefox 113+ (May 2023). All major browsers from 2023 onward support every space listed here. If the tool shows the unsupported banner, your browser is older than that — the CSS itself will still parse but won't produce the right color.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.