What this page does
Two or more colors are averaged in the space you pick. A weight of 2 counts twice as much as a weight of 1. The large swatch is the mix. The bar under it shows each color’s share. The four rows are that same color.
How to use this page
- Type a color or use its picker. Add color inserts a random color. Change that color the same way.
- Set each weight from 1 to 100. Remove a color once more than two are on the page.
- Choose OKLCH, HSL, or RGB. OKLCH is the default.
- Copy the HEX, RGB, HSL, or OKLCH row. Copy link, on the right of Add color, copies an address for these colors, weights, and mode.
What the three modes change
- OKLCH averages lightness, chroma, and hue. Hue goes around the wheel, so colors near red do not take a detour through green.
- HSL averages hue, saturation, and lightness, with the same hue rule. HSL lightness is not how bright a color looks.
- RGB averages the red, green, and blue channels. That path can pass through a dull middle.
Easy mistakes
- The same colors and weights can mix to a different color in each mode. OKLCH vs HSL vs RGB shows why those paths differ.
- Weight is a share of the whole set. It is not a stop between the first color and the last.
- When the note says Outside sRGB, the swatch is the color a screen can show. chroma.js clipped the mix. That clip is not CSS Color 4 gamut mapping.
Questions
Can I mix more than two colors?
Yes. Add color puts another color on the page. Two colors always stay, so the page still has a mix.
What does the weight do?
It is that color’s share of the average. Weights 1 and 3 mean the second color counts three times as much as the first.
Why does the mix change in HSL or RGB?
Each mode averages different channels. The result is the average in that space, so switching the mode can change the color you copy.