Design & Colour
Monochromatic Palette Generator
Enter a hex colour to see lighter and darker steps at the same hue.
Build a monochromatic palette
A monochromatic palette keeps one hue and walks lightness so surfaces, borders and text can stay in the same family. From a base HEX colour the tool builds lighter and darker steps in HSL while saturation stays put — handy for UI tokens, charts and quiet brand ramps. It is a fast sketch, not a polished design-system scale; perceptual spaces like OKLCH can look more even across many steps. Soften further toward white or black with the colour shade generator, and verify text pairs with the contrast checker.
Worked example
Base #2A6F97 with 2 steps each side yields five hexes: two lighter, the base, two darker at the same hue.
Limits and assumptions
HSL lightness only. Greys and near-black bases produce subtle ramps; neon bases stay saturated.
Frequently asked questions
What is monochromatic?
One hue family — different lightnesses (and sometimes saturations) of the same colour, not a multi-hue rainbow.
How is this different from colour shade?
Colour shade mixes toward white/black in RGB; this page steps lightness in HSL from the same hue.
What are HEX codes?
HEX is hexadecimal colour notation such as #2A6F97 used in CSS and design tools.
Will these pass WCAG?
Not automatically — check contrast for each text/background pair you use.