Color gradient steps
Enter two or more colors, one per line, choose the number of steps and a color space. You get a list of HEX codes from the first color to the last.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Put the colors in the left box, one per line: at least two.
- Set the number of steps and the space to blend in.
- Copy the HEX list from the result box.
How it works
For N steps the position of step i is i / (N − 1) along the path from the first color to the last. The colors are mixed in the chosen space with the same rules as CSS color-mix(), then converted to sRGB and rounded to HEX.
Example
Red #ff0000 to blue #0000ff in 3 steps in sRGB gives #ff0000, #800080, #0000ff: the middle value of each channel is 127.5, which rounds to 128. Black to white in 4 steps gives #000000, #555555, #aaaaaa, #ffffff.
Tips
- Use 5 to 9 steps for a chart scale and 10 or more for a smooth ramp.
- Check text contrast on every step of a ramp that carries text.
- To turn the steps into a CSS gradient, use the gradient generator.
Frequently asked questions
How many steps can I make?
Choose from 2 to 100 (2, 3, 4 … 10, 12, 16, 20, 24, 32, 50 or 100). The count includes the first and the last color, so 5 steps give the two end colors and three colors between them.
Can I use more than two colors?
Yes. With three colors and 5 steps the middle color falls exactly on the third step, and each half is blended on its own.
Which space gives the smoothest result?
OKLab is a good default: lightness changes evenly. sRGB is the classic straight line and can look dull. OKLCH keeps colors vivid by travelling around the hue wheel.
What input formats are accepted?
HEX with 3 or 6 digits, rgb(), hsl(), oklch(), oklab(), lch(), lab() and CSS color names.
Why do the HEX values round?
Each channel is rounded to a whole number from 0 to 255 after blending, so two nearby steps can occasionally share a channel value.