Why monochrome works
One hue with varied lightness is the quietest palette there is. Text, borders and backgrounds all agree, and there's nothing to clash. It suits text-heavy sites, data visualizations and brand systems that need restraint.
Monochromatic Color Palette Generator
A monochromatic palette is one hue at several lightness steps. This generator is a random harmonious roller, so the honest workflow is: fix your hue with the pipette, lock it, and pull each swatch's hue toward the base until you have a clean shade ramp.
Export palette
5 colors · pick a format, copy or download
Format7 lines
:root {
--color-1: #987b25;
--color-2: #31c3c9;
--color-3: #67194d;
--color-4: #509825;
--color-5: #313dc9;
}palette.css
Building a shade ramp here
- Roll a palette and pipette your base hue — the color you want at the center of the ramp.
- Lock it.
- For each other swatch, open the pipette and drag the hue close to the base; keep lightness stepping from light to dark.
- Export CSS variables and use them as
--color-1through--color-5.
Frequently asked questions
What's a good number of shades?
Five is a common ramp: one very light, one light, the base, one dark, one very dark. That covers backgrounds, borders, text and accents.
Can I get monochrome from a pure roll?
Sometimes. Golden-angle spacing means neighboring hues are close, so a roll can land almost monochrome. If it does, keep it and nudge the strays with the pipette.