A monochromatic scheme is the simplest colour relationship there is: one hue, expressed at several different lightness levels. Nothing about the underlying colour changes between steps, only how much white or black has been mixed in, which guarantees every swatch in the output belongs unmistakably to the same family. That makes a monochromatic palette the safest starting point when a project needs several related colours but cannot risk them clashing.
The whole lightness ramp is computed in your browser the moment you enter a colour. There is no upload and no server round trip, just a short calculation run against the HSL values you provide.
How this monochromatic palette generator varies lightness
The base colour is converted from hex to HSL, and the generator then produces a series of output colours that reuse the exact same hue and saturation values while stepping lightness from a light end near 90 percent down to a dark end near 10 percent. Each step is converted back through HSL to RGB and then to hex, so the final palette is a set of colours that differ in only one respect.
Because hue and saturation never move, every swatch reads as the same colour lightened or darkened, rather than as a set of colours that merely look similar. That is the defining property of a monochromatic color scheme, and it is what separates this generator from an analogous or triadic tool, both of which deliberately change hue between swatches.
When a monochromatic color scheme is the right choice
A monochromatic scheme is the right call whenever a design needs guaranteed harmony over variety, since every colour it produces is mathematically related to every other one. It is a common default for backgrounds, borders, and interface chrome, where the goal is a calm supporting structure rather than an attention grabbing accent.
- A card or panel that needs a slightly lighter or darker version of its background without introducing a new hue.
- Hover, active and disabled states for a button, built from the same brand colour at different lightness levels.
- A subtle background texture or gradient that should never compete with the content sitting on top of it.
- Data visualisation where intensity, not category, is the thing being encoded, since lightness naturally maps to magnitude.
- Reach for an analogous or complementary scheme instead when the project needs genuine hue variety rather than depth.
Why saturation and hue stay fixed
Colour theory defines three distinct operations for varying a single colour: a tint mixes toward white, a shade mixes toward black, and a tone mixes toward grey by reducing saturation. This generator focuses specifically on tints and shades, produced by moving lightness up or down in HSL, because that is the operation that keeps a palette recognisably monochromatic while still spanning a genuinely useful range from very light to very dark.
If saturation were also allowed to drift between steps, the palette would gradually shift toward grey at the extremes and stop reading as a pure lightness ramp, which would blur the line between a monochromatic scheme and a muted, desaturated one. Holding saturation constant keeps every step equally vivid relative to its own lightness.
Reading the lightness steps
Each generated swatch is labelled with its lightness percentage so the relationship between neighbouring steps stays visible rather than hidden behind a row of hex codes. Steps near the light end, above about 80 percent lightness, work well as subtle backgrounds. Steps in the middle, roughly 40 to 60 percent, are usually closest to how the original base colour actually looks. Steps near the dark end, below about 20 percent, suit text or a strong border that still needs to read as part of the same colour family.
Why does only lightness move, step after step?
Lightness is stepped across a fixed set of percentages spanning roughly 90 percent down to 10 percent, with hue and saturation copied unchanged from the parsed base colour at every step. Each HSL triple is converted back to RGB using the standard HSL to RGB algorithm, then formatted as a hex string, keeping the arithmetic identical to the conversion used by the rest of this site's colour tools.
Because only one HSL component changes at a time, the whole ramp can be recalculated in a fraction of a millisecond whenever the base colour changes, which is why the palette updates instantly as you type or pick a new starting colour.
Monochromatic palettes versus tint and shade scales
A dedicated tint and shade generator on this site builds a similar looking ramp but mixes toward white and black inside the OKLab colour space instead of stepping HSL lightness directly, which keeps the perceived brightness gap between steps more even across different hues. This monochromatic palette generator instead works entirely in HSL, which is simpler to reason about and matches how most design tools describe a single hue's lightness range, at the cost of some hues appearing to jump more than others between adjacent steps.
Use this generator when you want a quick, HSL native ramp described in familiar lightness percentages. Use the OKLab based tool when perceptual evenness between every step matters more than matching HSL's own numbering.
| Lightness | Typical use |
|---|---|
| 80 to 90% | Subtle backgrounds and light fills |
| 55 to 70% | Hover states, lighter than the base colour |
| 40 to 55% | Close to the original base colour |
| 25 to 35% | Pressed states and stronger borders |
| 10 to 20% | Text or a strong accent, still tied to the base hue |
How to generate a monochromatic palette
- 1
Enter a base colour
Type or pick the hex code that anchors the hue and saturation for every step.
- 2
Choose the number of steps
Pick how many tints and shades to generate across the lightness range.
- 3
Review the lightness ramp
Each swatch shows its hex code and lightness percentage, from lightest to darkest.
- 4
Copy the colours you need
Copy any individual step's hex value for use in a stylesheet or design tool.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the monochromatic palette generator.
A monochromatic palette holds hue and saturation completely fixed and only varies lightness, so every colour in it is provably the same underlying hue at a different brightness. Colours that merely look similar but differ in hue or saturation would not qualify, even if they appear related at a glance.
You can choose the step count, typically between five and nine, spanning from a light tint near 90 percent lightness down to a dark shade near 10 percent. More steps give finer control over small differences between neighbouring colours, while fewer steps keep the palette simple to work with.
It is deliberately restrained rather than boring. A monochromatic color scheme trades hue variety for guaranteed harmony, which is exactly the right trade off for backgrounds, interface chrome and interactive states where nothing should compete visually with the content sitting on top of it.
Yes, whatever saturation your input colour has is preserved exactly across every generated step, so a way to build tints and shades from one color that is already fairly desaturated will produce a correspondingly muted ramp rather than forcing full saturation onto every swatch.
A triadic generator deliberately changes hue between swatches, spacing three colours 120 degrees apart on the wheel. A single hue palette from this tool never changes hue at all, it only moves lightness, which is why the two produce very differently structured results even when starting from the same base colour.
This generator stops short of pure white and pure black at both ends, since a swatch at 100 or 0 percent lightness loses all trace of the original hue and stops reading as part of the monochrome color palette it came from. Staying within roughly 10 to 90 percent keeps every step recognisably related to the base colour.