This tool builds a monochromatic palette from a single base colour — the same hue swept from light to dark. Because every tone shares one hue, the result is always coordinated with no clashing colours, which makes it ideal for clean UI themes and minimal brands.
How it works
The tool converts your base hex colour to HSL (hue, saturation, lightness), then holds the hue constant and varies lightness (and saturation) in even steps to create a ladder of tints and shades. Each generated tone is converted back to a hex code. You choose how many swatches you need — between three and eleven — and they are spread evenly from light to dark across that one hue.
Example
From a base blue of #3366cc (hue ≈ 220°), holding the hue and stepping lightness gives a ladder such as:
| Role | Example hex |
|---|---|
| Lightest tint | #d6e0f5 |
| Light | #88a6e0 |
| Base | #3366cc |
| Dark | #244a91 |
| Darkest shade | #16294f |
Every tone keeps the same blue hue, so they sit together harmoniously. Everything runs in your browser; your colour never leaves your device.