Gradient Color Stops
Interpolate even color stops between two hex colors.
How to use
- 1 Enter a start colour and an end colour in hex.
- 2 Choose how many steps you want, including both ends.
- 3 Optionally set the gradient angle.
- 4 Copy individual stop colours or the whole CSS gradient.
About Gradient Color Stops
The Gradient Color Stops tool takes two hex colours and a number of steps, then computes the evenly-spaced colours that sit between them by interpolating each red, green and blue channel.
It is the quickest way to turn a start and end colour into a usable palette: a set of intermediate shades you can apply to charts, UI states, heat maps or design tokens, plus a ready-to-paste CSS linear-gradient that passes through exactly those stops.
Enter your start and end colours as #rrggbb or the #rgb shorthand, set how many steps you want — including both endpoints — and optionally the gradient angle.
The tool renders a live preview bar, lists every stop with its hex value and percentage position, and assembles the full linear-gradient() string with each colour pinned to its position.
Each stop carries a copy button, and the whole CSS value can be copied in one click.
Inputs are validated so a typo in a colour or an out-of-range step count produces a clear message rather than a broken gradient.
All the maths runs locally in your browser — no colours are uploaded — so it is fast, private and works offline.
Because interpolation happens in RGB space, the result matches what a CSS gradient renders between the same two stops.
FAQ
How are the in-between colours calculated?
Each RGB channel is linearly interpolated from the start colour to the end colour, matching how a CSS gradient renders between the same two stops.
What colour formats can I enter?
Six-digit #rrggbb and three-digit #rgb shorthand are both accepted, with or without the leading hash.
How many steps can I generate?
Between 2 and 64 stops. Two gives just the endpoints; more steps produce a finer palette and a smoother stop list.