Hold the lightness, step the saturation
A monochrome palette builds variety out of a single hue. Most generators spread it across brightness, but moving brightness also moves the contrast between text and background. So this page holds hue and lightness still and divides saturation evenly from a start value to an end value. The result is a set of colors that differ only in how vivid they are, which suits places where brightness has to match, such as series colors in a table or a chart.
How it is computed
The input color is converted with the HSL definition in the W3C CSS Color specification to read its hue. Lightness comes from the fixed value you enter, and saturation is the start and end range divided into the number of steps you asked for. If you want the base color lightness instead, one button fills that field for you. The rule line prints the hue and lightness being held along with the saturation range. The specification reference is current as of October 2026.
Limits and the other axes
Only the saturation axis moves here. Mixing white or black in to build a light and dark ladder belongs to a tint and shade step generator, and moving saturation and brightness together belongs to a different palette tool. This page does not grade contrast ratios.
Frequently Asked Questions
When lightness moves, the contrast between text and background moves with it, so some steps in a family stay readable and others do not. Pinning lightness leaves only vividness changing, which is easier to handle where brightness has to match.
At 0% lightness every color is black and at 100% every color is white, so saturation makes no difference at all. Every step would come out identical, so the page asks for a value between 1% and 99%.
Not here, this page works on the saturation axis only. For a light and dark ladder built by mixing white and black, use a tint and shade step generator, and for saturation and brightness moving together use a separate palette tool.