About the Color Mixer
This color mixer blends two or more colors in the proportions you choose and returns the resulting color as HEX, RGB, HSL and OKLCH. Type one color per line, optionally followed by a weight such as "#FF0000 30%", and pick the color space used for blending. For two colors it also shows an 11-step gradient between them and the equivalent CSS color-mix() expression, so the browser can do the same blend natively.
The color space matters more than most people expect. Averaging plain sRGB values — what most simple mixers do — makes blue and yellow come out gray and red and green come out a muddy olive. Blending in linear RGB behaves like mixing light; CIELAB and OKLab blend by perceived lightness; OKLCH keeps colors vivid by interpolating hue around the color wheel. Designers use it to find in-between brand colors, hover states, gradient midpoints and chart colors.
This is digital (light) mixing, not paint. Physical pigments mix subtractively, which is why blue and yellow paint make green while the sRGB average of #0000FF and #FFFF00 is gray. Results outside the sRGB gamut are clipped to the nearest displayable value.
How to use the color mixer
- 1Enter each color on its own line (HEX, rgb(), hsl() or a name).
- 2Optionally add a weight after a color, e.g. "#FF0000 25%".
- 3Choose the color space — OKLab or OKLCH give the most natural-looking blends.
- 4Read the mixed HEX and browse the blend steps between two colors.
- 5Copy the CSS color-mix() rule to let the browser compute it.
Formula and method
Each color is converted into the chosen space, its components are averaged using the normalised weights, and the result is converted back to sRGB and rounded to whole 0–255 channels. sRGB averages the gamma-encoded channel values directly. Linear RGB first removes the sRGB transfer curve, so the average matches physically mixing light. CIELAB (D65 white) and OKLab average lightness and the two opponent-color axes.
OKLCH averages lightness and chroma, and interpolates hue along the shorter arc of the color wheel, the default behaviour of CSS color-mix(); a gray with no hue takes the hue of the other color. With three or more colors the hue is a weighted circular mean. Colors outside the sRGB gamut are clipped.
- Cᵢ
- Color i expressed in the mixing color space
- wᵢ
- Weight (proportion) of color i
- L, a, b
- Lightness and opponent-color axes in CIELAB/OKLab
- L, C, h
- Lightness, chroma and hue angle in OKLCH
Worked examples
Red + blue, equal parts in sRGB
Averaging the channels gives red (255 + 0) ÷ 2 = 127.5 → 128, green 0 and blue 127.5 → 128: #800080, the CSS color "purple".
Blue + yellow in sRGB vs OKLCH
In sRGB the average of blue and yellow is a flat gray (#808080). In OKLCH, lightness and chroma are averaged and the hue travels the short way round the wheel from blue (≈264°) to yellow (≈110°), landing near 187°. The result is a vivid aqua #00CFBD (slightly clipped to fit sRGB) — far more colorful than the gray.
70% brand blue, 30% white in linear RGB
Each channel is linearised, mixed 70/30 with white (linear value 1.0) and re-encoded. Because linear mixing adds light, the result #98A7F1 is noticeably lighter than the plain sRGB 70/30 average (#6692F1).
Frequently asked questions
Why does mixing blue and yellow give gray instead of green?+
Screens mix light, and averaging the RGB values of #0000FF and #FFFF00 gives #808080 gray. Paint is subtractive: pigments absorb light, so blue and yellow paint leave mostly green. Try the OKLCH mode for a more intuitive, colorful blend.
Which color space should I use to mix colors?+
OKLab gives smooth, even-looking blends and is a good default for gradients and in-between shades. OKLCH keeps saturation high by rotating hue. sRGB matches older tools and CSS defaults, and linear RGB matches how light physically combines.
Can CSS mix colors for me?+
Yes. color-mix() is supported in all modern browsers: color-mix(in oklab, #FF0000 30%, #0000FF) returns the blend at render time. The tool shows the equivalent rule for any two-color mix so you can use variables instead of hard-coded HEX.
How do weights work?+
Weights are proportions, normalised to 100%. "#FF0000 3" and "#0000FF 1" is the same as 75% and 25%. Lines without a weight count as 1 part each, so three plain colors are mixed in equal thirds.
How do I mix a color with white or black?+
Add #FFFFFF or #000000 as a second color with the share you want. Mixing with white makes a tint and with black a shade; the tints and shades generator does this for a whole scale at once.