Single hue · lightness ramp
Monochromatic generator
Lock one hue and export eight lightness steps — a monochromatic ramp for buttons, borders, and backgrounds without drifting into a different color family. Ideal when brand only gave you one purple.
Why this tool exists
Monochrome systems read premium and calm. They are also the fastest way to build hover/disabled states that still feel on-brand if you lack a full token file.
How to use it
- Choose a base hue with the color input.
- Review the eight steps from dark to light in the list.
- Copy HEX chips for each step into your token sheet.
- Extend with tint & shade if you need ten explicit mixes toward white/black.
Use a different tool when…
You need multi-hue brand palettes — use the palette generator instead.
Practical tips
- Middle steps often become body text backgrounds; ends are hover and disabled.
- Very light steps may fail contrast for gray text — check ratios.
- Saturation is held from your base; change base if steps look washed out.
FAQ
How many steps are generated?
Eight lightness stops from the same hue and saturation as your pick.
Can I change saturation per step?
Not on this page — edit the base color or use design-tool HSL curves.
Is this the same as Material tonal palettes?
Similar intent, simpler math. Material uses more sophisticated tone engines.
Can I export CSS?
Copy each HEX chip; paste into the CSS variables generator for named tokens.
Why does yellow look muddy?
HSL lightness is not perceptual. Consider OKLCH ramps for yellow brand colors.