Color Mixer: Blend Two Colors and Generate Intermediate Shades
Blend two colors at any ratio and generate the shades that step smoothly between them. Choose RGB (plain averaging of the values) or OKLab (perceptually even lightness). Click a result to copy its HEX code, or export the steps as CSS variables. Everything runs in your browser, and nothing is sent to a server. For harmonious schemes, try the Color Palette Generator; to convert to OKLab and other spaces, use the Color Space Converter.
🔒 Runs in your browser · Your data is never sent to a server
Mixed color
Intermediate shades
How to use
- Set "Color A" and "Color B" with the color pickers or the HEX fields.
- Drag "Ratio of color B" to set the mix, and pick a "Mix method".
- Set "Number of steps" to get evenly spaced colors between the two.
- Click a color to copy its HEX, or copy all steps as CSS variables or a HEX list.
Notes
- RGB mixing interpolates the sRGB values linearly. Mixing opposite colors tends to give a dull, grayish result.
- OKLab mixing interpolates in a perceptual color space, so lightness changes more smoothly. Results are clipped to the sRGB range.
- The number of steps includes both ends, color A and color B (2 to 21). The ratio only affects the mixed color.
- This is an on-screen calculation and will not match physically mixing paints or printing inks.
Glossary
OKLab
A color space designed to match how people see lightness and color differences. Interpolating in it keeps lightness and hue changes smooth.
Intermediate shades
Colors placed at even intervals between two endpoints. Useful as the in-between stops of a gradient.
Additive mixing
Mixing by adding red, green and blue light values. Screens work this way, which differs from subtractive mixing with paints.
FAQ
What is the difference between RGB and OKLab mixing?
RGB mixing averages the sRGB values directly, so opposite colors often turn dull. OKLab interpolates in a perceptual space, so lightness changes more smoothly and gradients usually look more natural.
Does the number of steps include the two endpoints?
Yes. With 5 steps, the first is color A, the fifth is color B, and three evenly spaced colors sit between them. You can choose 2 to 21 steps.
Why does the result differ from mixing real paint?
This tool calculates on-screen light, not subtractive mixing like paint or ink. For example, blending blue and yellow can give a grayish color rather than green.
Can an OKLab result be clipped to a different color?
Yes. If the interpolated OKLab color falls outside the sRGB gamut, it is clipped into range before being shown as HEX. This can happen when blending very vivid colors.
Share this page