Color Mixer

Blend two colors and see every step in between. Choose how many steps, mix in RGB or HSL color space, click any step to copy its HEX, and export the whole blend as gradient CSS.

Steps 9 Mix in:

Midpoint mix (50/50)

#000000

Gradient CSS

How Color Mixing Works in the Browser

Mixing two colors means moving step by step from one to the other through a color space. At each step the tool interpolates between the start and end values; at 50% you get the true midpoint — the "average" of the two colors. This is the same maths a CSS gradient uses internally, but here you get the exact, copyable HEX of every stop.

RGB vs HSL Mixing — Why the Result Differs

The color space you blend in changes the path between two colors:

RGB interpolates the red, green, and blue channels directly. It's predictable and matches how CSS gradients blend by default, but mixing two vivid colors can pass through a muddy gray in the middle.
HSL interpolates hue, saturation, and lightness. Because it rotates around the color wheel, the midpoints stay vivid and often travel through intermediate hues — great for rainbow-like ramps, though it can take an unexpected route around the wheel.

Practical Uses for a Color Blend

Data visualisation — generate evenly spaced colors for charts, heatmaps, and categorical legends.
Gradient stops — pull intermediate HEX values to hand-tune a multi-stop gradient.
Brand transitions — find the colors that sit between two brand hues for badges, states, or theming.
Finding a midpoint — blend a light and dark version of a color to get a balanced mid-tone.

Tips for Better Blends

If an RGB blend looks dull in the middle, switch to HSL for more vivid midpoints. For accessible UI ramps, keep the two endpoints far apart in lightness so the steps are easy to tell apart. And remember that more steps means smaller color differences — 5–9 steps is usually enough for a readable scale, while 12–15 suits smooth gradient sampling.

Frequently Asked Questions

It interpolates between the two colors to produce a series of in-between steps. At 50% you get the exact midpoint — the average of the two. You can copy any step's HEX or export the whole blend as a gradient.

RGB matches default CSS gradients and is predictable but can look muddy in the middle. HSL keeps midpoints more vivid by travelling around the color wheel. Try both — the tool switches instantly.

Click any band in the blended result and its HEX is copied to your clipboard. Use "Copy all HEX" to grab every step at once, or "Copy gradient" for ready-to-paste CSS.

5–9 steps usually gives a clear, readable scale for charts or UI states. Use 12–15 when you want fine-grained samples for a smooth gradient.

Nothing is uploaded. The mixer runs entirely in your browser — your colors never leave your device.