Color Gradient Mixer
Generate a smooth palette of N colors between two hex colors
10 hex codes
#6366f1 · #7263e7 · #815fdd · #915cd4 · #a059ca · #af55c0 · #be52b6 · #ce4fad · #dd4ba3 · #ec4899
About the Colour Mixer
This color mixer blends two colours into an evenly spaced ramp and gives every step as a hex code. Interpolation can run linearly, eased, or through HSL to keep the midpoints saturated.
A color mixer answers the practical question of what sits between two colours. Interfaces need in-between values constantly: a hover state slightly darker than a button, a disabled state between the active colour and the background, or a border that is neither the surface nor the text colour.
Rather than one blended result, this produces a ramp — a run of evenly spaced steps from the first colour to the second, with the number of steps up to you. That is what turns two endpoints into the ten-step scale a design system expects, and it gives a smoother progression than picking each stop by eye.
The interpolation mode matters more than it sounds. Blending straight through RGB can pass through a desaturated middle, which is why two vivid colours sometimes produce a muddy centre; interpolating through HSL keeps saturation up across the ramp. Eased interpolation clusters the steps toward one end, which is useful when you want fine gradations near a base colour.
How to use the Colour Mixer
- Set the first colour. Enter the hex value the ramp should start from.
- Set the second colour. Enter the colour to blend toward — white or black for tints and shades.
- Choose steps and mode. Pick how many steps you want and whether to interpolate linearly, eased, or through HSL.
- Copy the step you need. Take any hex value from the ramp into your stylesheet or token file.
Colour Mixer features
- Blends two colours into an evenly spaced ramp
- Choose how many steps the ramp contains
- Linear, eased or HSL interpolation
- Every step shown as a copyable hex code
- Mix with white or black to build tints and shades
- Runs in your browser; nothing is uploaded
Frequently asked questions
What is the difference between the interpolation modes?
Linear moves at a constant rate through RGB. HSL interpolates hue, saturation and lightness separately, which keeps the middle of the ramp saturated. Eased spaces the steps unevenly, clustering them toward one end so you get finer gradations there.
Why does the middle of my ramp look muddy?
Because straight RGB interpolation between two saturated colours of different hues passes through a desaturated point. Switch to HSL interpolation, which travels around the hue wheel instead of through the middle of the colour cube.
How do I build a tint and shade scale from one brand colour?
Mix it with white for the tints and with black for the shades, generating each run as its own ramp. That gives you a light-to-dark scale anchored on the real brand colour rather than a set of guesses.
How many steps should a design system scale have?
Nine to eleven is the common convention, which gives enough room for surfaces, borders, text and states without becoming a set nobody can remember. Generate more than you need and drop the ones that do not earn a place.
Is anything uploaded?
No. The blend is arithmetic done in your browser, so nothing is sent anywhere.