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.
When monochromatic palettes work best
UI states and component variants
A monochromatic palette maps naturally to UI states because each tone carries an implied weight. The lightest tones work for hover backgrounds and disabled states; the base colour for interactive default states; mid-dark tones for pressed or active states; the darkest tones for text on light backgrounds. This gives you a complete set of state variations without any colour clashing.
Minimal and editorial brands
Brands that want to project calm authority — financial services, professional tools, architectural firms, luxury goods — frequently use monochromatic palettes because the absence of competing colours reads as confident restraint. A single well-chosen brand hue expanded across a tonal range covers all use cases (primary action, secondary text, backgrounds, borders) while remaining instantly recognisable.
Dashboard backgrounds and data visualisation
Tonal backgrounds work exceptionally well for dashboards because each panel, card, or sidebar section can be assigned a different lightness step without creating visual chaos. The hierarchy is conveyed by lightness contrast rather than hue contrast.
How tints and shades differ
The terms are sometimes used loosely, but in colour theory:
- A tint is the base colour mixed with white — it raises lightness and may reduce saturation. Tints are lighter than the base.
- A shade is the base colour mixed with black — it lowers lightness and may shift saturation slightly. Shades are darker than the base.
This generator steps lightness across both directions from the base, producing tints above it and shades below it, with the base colour sitting roughly in the middle of the range when you select an odd number of swatches.
Choosing how many swatches
A 3-swatch palette is the minimum useful set: light (background / hover), base (action / brand), dark (text / border). It works for very simple UIs or as a starting point.
A 5 or 7-swatch palette gives enough range for most design systems — it covers backgrounds, subtle borders, midtones, the primary action colour, emphasis states, and dark text in one sequence.
A 9 or 11-swatch palette mirrors the scale used by design systems like Tailwind CSS (which uses 50/100/200/…/900) and provides fine-grained control for complex component libraries. The generated hex codes map directly to those scale positions.