Color Mixer
Mix two colors in a chosen color space at any ratio, the way CSS color-mix() does. Enter two colors in any CSS format, set the share of the second color from 0 to 100 percent and pick OKLab, OKLCH, Lab, LCH, sRGB, linear sRGB, Display P3, HSL, HWB or XYZ. The result comes as HEX, RGB, HSL and OKLCH plus a ready color-mix() expression for your stylesheet.
Frequently asked questions
How does the amount work?
The amount is the share of Color 2 in the mix. 0% returns Color 1, 100% returns Color 2 and 50% lands halfway between them in the chosen space. It matches color-mix(in space, color1 (100 - p)%, color2 p%).
Which color space should I choose?
OKLab, the default, is perceptually uniform and avoids muddy or dark middles. sRGB mixes the gamma-encoded channels like older browsers and Sass, which makes mixes of saturated colors darker and duller. Lab is the older CIE perceptual space and behaves similarly to OKLab, with less even blues.
What do the hue-based spaces do?
OKLCH, LCH, HSL and HWB interpolate the hue along the shorter arc of the color wheel, the CSS default, so the middle keeps its saturation and can be more vivid than either input. When one color is a neutral gray without hue, the other color's hue is used.
What are linear sRGB and XYZ for?
Both mix light intensities linearly, like overlapping beams of light, so the middle looks brighter than in sRGB. They are useful for physically based effects and for matching how blurred or blended pixels look.
How is transparency handled?
Like CSS color-mix(), the mixer interpolates with premultiplied alpha, so a transparent color does not pull the mix toward black. The alpha itself is interpolated at the same ratio and appears in 8-digit hex and after the slash in CSS functions.
Which input formats can I use?
Hex codes with or without #, CSS color names, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() spaces such as display-p3, and cmyk(), in any combination. Each color can be up to 100 characters long.
What happens when the result is outside sRGB?
Mixing in Display P3, OKLCH or LCH can produce colors that sRGB cannot show. HEX, RGB and HSL are then mapped into sRGB with the CSS Color 4 algorithm and the result carries a note, while the OKLCH value keeps the unmapped color.
How do I use the color-mix() expression?
Paste it into any CSS property that takes a color. It names the inputs by hex code, or by oklch() for wide-gamut inputs, so the browser recomputes the same mix. color-mix() works in all current versions of Chrome, Edge, Firefox and Safari.
How precise is the result?
The amount is a whole percentage and the mix is computed at full precision with the culori library. RGB channels are rounded to whole numbers, HSL percentages to two decimals and OKLCH lightness and chroma to four, so browsers may differ by one step in the last digit.
How do I get several steps between two colors?
Run the mixer with different amounts, such as 25%, 50% and 75%. For a full scale toward white, black or gray, the Color Tint, Shade and Tone Generators produce every step in one table.