Color mixer
Blend two colors at any ratio and copy the result. Mix in OKLCH, RGB or HSL for different transitions.
About this color mixer
Blend two CSS colors at any ratio and copy the resulting hex. Drag the slider to set how much of color B to mix in, and choose the color space the blend travels through — OKLCH, RGB or HSL.
Why the space matters
Mixing red and blue in RGB dims toward purple-grey at the midpoint; in OKLCH the same blend stays vivid because OKLCH is perceptually uniform; in HSL it sweeps around the hue wheel and can pass through unexpected colors. The mixer lets you compare all three so you can pick the transition that looks right for tints, theme colors and state variations.
FAQ
Why pick a color space to mix in?
The path between two colors differs by space. RGB is the simple average and can pass through grey; OKLCH stays bright and perceptually even; HSL rotates around the hue wheel. Try each to see which midpoint you want.
Is this the same as a gradient?
A gradient shows the whole transition; the mixer gives you one specific point along it as a solid color you can copy.