Color Mixer

1. Set color A, the 0% end, by typing a value or using its swatch picker.
2. Set color B, the 100% end, the same way.
3. Read the 11 steps. The first is pure A, the last is pure B, and each step in between moves 10% further toward B.
4. Check the HEX, RGB and HSL values under each step, plus its equivalent color-mix(in srgb, …) expression.
5. Copy all 11 hex codes at once to paste into a design file or token list.

The mixer interpolates each RGB channel along a straight line. At the 30% step, every channel is 70% of color A plus 30% of color B, rounded to a whole number. Mixing #ff0000 and #0000ff at 50% gives rgb(128, 0, 128), which is #800080, the CSS named color purple.

Because the math runs on ordinary sRGB values, each step matches color-mix(in srgb, …) to within rounding, so the hex shown is the color the browser draws for that expression. It also inherits sRGB's weak spot: complementary pairs meet at gray. Red #ff0000 and cyan #00ffff mixed 50/50 land on #808080.

color-mix() comes from CSS Color Level 5 and has worked in all major browsers since 2023. It takes an interpolation space and two colors, each with an optional percentage:

color-mix(in srgb, #6366f1 70%, white)

That is 70% #6366f1 and 30% white, which renders as #9294f5. The percentage rules: give one percentage and the other color gets the remainder; give none and the mix is 50/50; give two that add up to less than 100% and the result turns partly transparent. Valid spaces include srgb, srgb-linear, hsl, lab, lch, oklab and oklch.

in srgb is predictable and matches this tool, but mixes of distant hues go dull in the middle. in oklab blends in a perceptual space, so lightness changes evenly and the midpoint looks less murky, though complementary pairs still lose saturation. in oklch interpolates the hue angle around the wheel and keeps chroma: the halfway point of red and blue becomes a bright magenta-purple instead of the darker #800080, and red and cyan pass through yellow-green rather than gray. The trade-off is that OKLCH can pass through a hue neither input contains. The OKLCH explainer covers why its lightness and hue stay stable.

• Hover and active states: --brand-hover: color-mix(in oklch, var(--brand) 85%, black); darkens any brand color by a consistent amount, so a retheme only changes --brand.
• Tinted borders and overlays: color-mix(in srgb, var(--brand) 20%, transparent) returns the brand color at 20% opacity, useful for focus rings, selected rows and dividers.
• Design tokens: derive surface, border and subtle-background tokens from one or two base colors instead of hard-coding a dozen hexes.

When you need fixed hex values for a design tool or an older codebase, run the same pair through the mixer and copy the steps. Any mix used for text still needs a pass through the contrast checker.