Blend Colors
Mix any two colors at any ratio and grab the result as HEX, RGB or HSL — plus every in-between step as a gradient. Free and instant, everything is computed right in your browser.
Every step from Color A to Color B — click any step to copy its HEX code.
How to blend two colors online
- Pick your two colors. Use the color pickers or type HEX codes (3 or 6 digits, with or without the #) for Color A and Color B.
- Set the blend ratio. Drag the slider: 0% keeps pure Color A, 100% is pure Color B, and 50% is an even mix of both.
- Copy the result. Grab the blended color as HEX, RGB or HSL, or click any step in the gradient strip to copy an in-between color.
About this tool
This free color blender mixes two colors the same way CSS color-mix() and the Sass mix() function do: each red, green and blue channel is interpolated between the two colors according to your ratio. That makes it perfect for creating hover and active states from a brand color, finding the midpoint between two palette colors, generating gradient stops, or softening a strong accent by blending it toward a background color. The step strip gives you a ready-made, evenly spaced gradient between any two colors — handy for data visualizations and heat-map scales.
Everything runs locally in your browser with plain JavaScript — no uploads, no accounts and no limits. If you need lighter or darker variations of a single color instead, try the Lighten Color, Darken Color or Color Shades tools.
Frequently asked questions
How exactly are the colors mixed?
The tool uses linear interpolation in the sRGB color space: for a ratio t, each channel is computed as A + (B − A) × t and rounded to the nearest integer. A 50% blend is the average of both colors, matching what color-mix(in srgb, A, B 50%) produces in CSS.
Why does blending blue and yellow give gray instead of green?
RGB mixing models light, not paint. Blue (#0000ff) and yellow (#ffff00) average to #808080, a neutral gray, because their channels cancel out. Pigment mixing (where blue + yellow = green) is a subtractive process that behaves differently from screen colors.
What does the blend ratio percentage mean?
It is the share of Color B in the mix. At 25% you get a color that is three-quarters Color A and one-quarter Color B; at 75% the proportions are reversed. Use the ⇄ Swap button to flip the direction without re-entering colors.
Can I get more than two in-between colors?
Yes — choose up to 11 gradient steps. The strip always includes both end colors and evenly spaced blends between them, and you can copy each step individually or all of them at once as a HEX list.