Color
Color Mixer
Pick two colors and get 17 evenly-spaced blend steps between them.
Mix two colors and see the result
- #8cc043
- #85bc4b
- #7fb954
- #78b55c
- #72b265
- #6bae6d
- #64aa75
- #5ea77e
- #57a386
- #509f8e
- #4a9c97
- #43989f
- #3d95a8
- #3691b0
- #2f8db8
- #298ac1
- #2286c9
About the color mixer
Color Mixer takes two colors — a top and a bottom — and generates 17 evenly-spaced colors between them, including both endpoints. Enter each color as a 3- or 6-digit hex code, or use the native color-picker swatch next to each field, and the row of 17 swatches recomputes live. It's a fast way to preview a two-color blend before hand-writing it into CSS, without reaching for a design tool.
Under the hood, each hex code is parsed into red, green, and blue components, then every channel is interpolated independently: for step i of 17, t = i / 16, and each output channel is round(a + (b - a) * t). That's linear interpolation in sRGB — the same space the hex values already live in — not a perceptual space like OKLab, so a blend between two very different hues (green and blue, say) can look duller in the middle than a perceptual blend would. The step count is fixed at 17 and isn't adjustable in the UI. Everything runs client-side; no color you enter is sent anywhere.
Reach for this when you need concrete intermediate colors rather than a live CSS gradient: building a color ramp for a design-token scale, picking a hover or active-state color that sits between a base and an accent, or sanity-checking how two brand colors blend before committing to a linear-gradient(). Output is plain #rrggbb hex, so any swatch pastes straight into CSS, a design tool, or a config file with no reformatting.
Examples
Top: #8cc043
Bottom: #2286c9
Step 0 (t=0.00): #8cc043
Step 4 (t=0.25): #72b265
Step 8 (t=0.50): #57a386
Step 12 (t=0.75): #3d95a8
Step 16 (t=1.00): #2286c917 steps run from Top (step 0) to Bottom (step 16); every 4th step is shown. Verified by running the tool's own interpolateRgb() + rgbToHex() against its default colors.
function interpolateRgb(a, b, steps) {
const out = [];
for (let i = 0; i < steps; i++) {
const t = i / (steps - 1);
out.push({
r: Math.round(a.r + (b.r - a.r) * t),
g: Math.round(a.g + (b.g - a.g) * t),
b: Math.round(a.b + (b.b - a.b) * t),
});
}
return out;
}
interpolateRgb({ r: 0, g: 0, b: 0 }, { r: 255, g: 255, b: 255 }, 5);
// → rgb 0,0,0 / 64,64,64 / 128,128,128 / 191,191,191 / 255,255,255This is the exact function the tool calls (src/lib/tools/color.ts), run here on black→white at 5 steps: the midpoint of pure black and white is rgb(128, 128, 128), mid-gray, exactly as expected.
/* Step 0 and step 16 are your original two colors */
.hero {
background: linear-gradient(to right, #8cc043, #2286c9);
}
/* Step 8 (the midpoint, t = 0.5) as a flat hover state */
.button:hover {
background-color: #57a386;
}Every generated swatch is already a valid #rrggbb string — paste it straight into CSS, no format conversion needed.
Frequently asked questions
How many colors does Color Mixer generate between my two picks?
Always 17, including both endpoints — the count is fixed and isn't adjustable in the UI. Step 0 is your top color, step 16 is your bottom color, and steps 1–15 are evenly spaced in between.
Is this a perceptual blend, like OKLab or LAB interpolation?
No — it's linear interpolation of the red, green, and blue channels in sRGB. That's simple and predictable, but a blend between two very different hues (green to blue, for example) can look duller in the middle than a perceptual blend would.
What happens if I type an invalid hex code?
The field is flagged invalid once you click away from it. Until you enter a valid 3- or 6-digit hex, the swatch list falls back to that field's default color — #8cc043 for the top, #2286c9 for the bottom.
Can I enter rgb(), hsl(), or a named color instead of hex?
Not in these input fields — they only accept hex (#rgb or #rrggbb). w3docs' Color Converter tool accepts rgb(), hsl(), hwb(), cmyk(), and CSS named colors, and shows every format for one color at once.
Does Color Mixer send my colors to a server?
No. The interpolation runs entirely in your browser in plain JavaScript — nothing is transmitted, logged, or stored.