CSS color-mix() Preview (Interpolation Space Comparison)
Compare how CSS color-mix() blends two colors across interpolation spaces (srgb, hsl, oklch, lab, lch, hwb) — live swatches and copyable CSS.
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.
About this tool
ShowHide
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.
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
OKLCH Color Picker
Pick colours in the perceptually uniform OKLCH space (lightness · chroma · hue) — and see whether each pick fits inside the sRGB display gamut.
Color & CSS
CSS Blend Modes Simulator
Apply all 16 W3C blend modes to two colors and see the computed hex for each, with a copyable mix-blend-mode CSS snippet per mode.
Color & CSS
Color Mixer
Interpolate between two colors in RGB, HSL, or CIELAB space. See a gradient strip of intermediate steps.
Color & CSS
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
Color & CSS
Color Lerp / Gradient Steps
Pick two hex colors, get N discrete intermediate steps — in sRGB, linear RGB, OKLab or HSL — with optional easing.
Color & CSS
Wavelength to Color Converter (nm → sRGB)
Convert a light wavelength in nanometres (380–780 nm) to an approximate sRGB color, with a clickable rainbow bar and Fraunhofer reference lines.
Color & CSS