What color interpolation means
Mixing two colors on a computer means calculating points between two sets of numbers. If color A is 0 in one channel and color B is 255, the point halfway along is 127.5, rounded to 128. That calculation is called interpolation, and the result depends on which numbers you interpolate: the red, green and blue channels, hue, saturation and lightness, or the coordinates of a perceptual color space.
In this color mixer, you pick color A, color B, 3 to 20 steps and the interpolation space. The scale includes both ends, so 5 steps means A, three in-between shades and B. Each swatch shows its HEX code and copies it with one click, the midpoint color is highlighted, and you can copy the whole scale as CSS custom properties or as JSON, ready for a design tokens file.
RGB, HSL and OKLCH in practice: red to blue
The clearest way to see the difference is to mix red (#FF0000) with blue (#0000FF) and look at the midpoint in each space.
| Space | Midpoint | What happens |
|---|---|---|
| RGB | #800080 | Each channel is averaged: rgb(128, 0, 128). A dark purple that looks darker than either end. |
| HSL | #FF00FF | Hue goes from 0° to 240° along the shorter arc, through 300°, with saturation and lightness held constant. The middle is pure magenta. |
| OKLCH | #BA00C2 | Perceived lightness and chroma land between the two colors, and hue follows the shorter arc. The result is a lighter, more vivid purple-magenta than the RGB one. |
RGB is the browser's default and the most predictable, but it darkens and dulls the middle of distant colors. HSL keeps saturation high, yet its lightness doesn't match what your eye sees: a yellow and a blue with the same 50% L look very different in brightness, so the scale can have steps that jump out. OKLCH was designed so that equal distances in the numbers look like equal distances on screen, which is why it gives the most even steps. The mixer's OKLCH option interpolates lightness, chroma and hue (along the shorter arc of the wheel) and is equivalent to color-mix(in oklch, …) in CSS. When the result falls outside the sRGB gamut, as this intense purple does, it's clipped to the nearest displayable HEX value.
Additive, subtractive and what this mixer calculates
In additive mixing, the kind light does, adding red and green gives yellow: #FF0000 + #00FF00 = #FFFF00. In subtractive mixing, the kind paint and print do, each pigment absorbs part of the light, and mixing everything heads toward dark. This mixer does neither: it takes a weighted average between the colors, like a frozen gradient. That's why red with green in RGB gives #808000, an olive green, not yellow. Use the tool to plan screen colors; it doesn't predict what real paints will do, since that depends on the pigments.
Where a color scale makes a difference
- Design systems: shades numbered 50 to 900 give consistent variations for backgrounds, borders, text and states.
- Sequential charts: heat maps and choropleths need steps that look evenly spaced; OKLCH helps keep the data from reading wrong.
- Interaction states: a slightly darker shade for hover and another for active, taken from the same scale, keep buttons consistent.
- Gradients: the midpoint shade can become an extra stop in the CSS gradient generator to avoid a grayish center.
How to build a design system scale from one color
Say your brand color is royal blue (#4169E1) and it takes the 500 slot.
- Light shades (50 to 400): set #FFFFFF as color A and #4169E1 as color B, with 6 steps in OKLCH. Drop the pure white; the four in-between shades become 100 to 400. For 50, generate an extra step closer to white or rerun the mix with more steps.
- Dark shades (600 to 900): set #4169E1 as color A and a very dark, still bluish color such as #000080 as color B. Mixing with pure black tends to make dark shades look lifeless.
- Review and export: check that the steps look evenly spaced, test text contrast on each shade and copy everything as CSS custom properties.
:root { --brand-100: #...; --brand-500: #4169E1; --brand-900: #...; }To find colors that go with your main color, rather than variations of it, use the color palette generator.
color-mix(): the same idea, native in CSS
The color-mix() function does in the browser what this mixer does here, with a ratio and a color space:
.highlight { background: color-mix(in oklch, red 50%, blue); }
.button:hover { background: color-mix(in oklab, var(--brand-500), black 15%); }It's handy for deriving hover states, borders and soft backgrounds from a single variable without precomputing every shade. With in oklch, the browser computes the same thing as the mixer's OKLCH option: red with blue gives the vivid purple-magenta from the table. If you want a less saturated transition, in oklab mixes the same perceptual coordinates in a straight line, without rotating the hue, and gives a softer purple. The mixer is still the better place to see the full scale and lock HEX values into a design system. Our guide to modern CSS colors covers color-mix(), OKLCH and browser support in detail.