Why palettes are built from one colour, not ten
Amateur palettes are a handful of colours picked because they look nice together. Professional palettes are one or two hues expressed at many lightness levels. That difference is why design systems look coherent: because every step shares the same underlying hue, anything you build from them harmonises automatically.
The 50–900 numbering convention — popularised by Material Design and now near-universal thanks to Tailwind — gives every step a defined job. The 50 to 200 range is for tinted backgrounds and subtle fills. 500 is your brand colour, the one people recognise. 600 and 700 handle hover states and text that needs to sit on light backgrounds. 800 and 900 provide depth, borders and high-contrast text.
Why the scale uses HSL under the hood
Generating a scale means holding hue and saturation steady while walking lightness up and down — which is trivial in HSL and awkward in hex. Hex codes describe how much red, green and blue to mix; HSL describes the colour the way a person perceives it, as a hue on a wheel, an intensity, and a lightness.
That makes HSL the right format for reasoning about colour even outside a generator. Need a hover state? Drop lightness by 8 to 10. Need a disabled variant? Cut saturation. Need a matching accent? Rotate the hue and keep everything else. The colours lesson on our CSS page has an interactive HSL demo if you want to build the intuition.
Complementary and analogous accents
The accent suggestions come from classical colour theory. The complement sits directly opposite your colour on the wheel — maximum contrast, which makes it powerful and easy to overuse. Reserve it for the moments that genuinely need to grab attention: a primary call to action, an error state, a single highlighted metric.
Analogous colours are the immediate neighbours on the wheel. Because they share visual DNA with your brand colour, they harmonise effortlessly and are the safe choice for secondary UI, chart series, illustration accents and section backgrounds.
From palette to design system
A palette becomes a system the moment you name it. Export the scale as CSS custom properties and reference the tokens — never raw hex values — throughout your stylesheets. A component that says background: var(--brand-600) tells the next developer what the colour is for; one that says background: #662af4 tells them nothing, and guarantees a painful find-and-replace when the brand changes.
Tokens are also what make theming possible: reassign the same token names under a [data-theme] selector and the whole interface re-skins from one place. That is exactly the pattern in our theme tokens lesson.
Always verify contrast before shipping
A generated scale is mathematically consistent, not automatically accessible. Whether a given step is safe for text depends on what sits behind it. As a rough guide, steps 600 and darker are usually safe for body text on white, and steps 200 and lighter usually work as backgrounds behind dark text — but always confirm the specific pairing with the contrast checker rather than trusting the numbers.