Colour palette generator

How to use this tool

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.

How this tool builds its 50–900 scale, and where HSL falls short

The generator converts your colour to HSL, keeps the hue and saturation fixed and gives each step a new lightness. The light end is absolute: 50, 100, 200 and 300 are always 96%, 90%, 80% and 68%. From 400 down, everything is relative to your colour: 400 is eight points lighter, 500 is your exact input, and 600 to 900 are 10, 20, 30 and 38 points darker, with small floors so nothing hits pure black. For a typical mid-tone brand colour at around 48% lightness, that puts 900 at 10%.

// HSL lightness (0–100) this tool uses for each step, given the
// lightness of your base colour. Hue and saturation never change.
function scaleLightness(l) {
  return {
    50: 96, 100: 90, 200: 80, 300: 68,   // tints: fixed values
    400: Math.min(l + 8, 95),
    500: l,                              // your colour, untouched
    600: Math.max(l - 10, 8),            // shades: offsets from the base
    700: Math.max(l - 20, 6),
    800: Math.max(l - 30, 5),
    900: Math.max(l - 38, 4),
  };
}

const show = s => Object.entries(s).map(([k, v]) => `${k}:${v}`).join(' ');

console.log(show(scaleLightness(48)));
// 50:96 100:90 200:80 300:68 400:56 500:48 600:38 700:28 800:18 900:10

console.log(show(scaleLightness(80)));  // a pale base breaks the order
// 50:96 100:90 200:80 300:68 400:88 500:80 600:70 700:60 800:50 900:42

The second line of output is the edge case. Because the tints are fixed and the shades are relative, a pale base such as a lemon yellow or a pastel produces a 300 that is darker than 400 and 500, and a 900 that is still a mid-tone. If your brand colour sits much above 60% lightness, generate the scale from a deeper version of it and keep the brand colour itself as an accent rather than as 500.

The deeper limitation is HSL itself, because its lightness is not perceptual. Pure yellow #ffff00 and pure blue #0000ff are both 50% lightness, yet against white one has a contrast ratio of 1.07:1 and the other 8.59:1. That is why the same step number can pass a contrast check in one hue and fail in another. If you need steps that look equally light across hues, build the scale in oklch(), which every major browser has supported since 2023. You can even derive steps in CSS with relative colour syntax, for example oklch(from var(--brand-500) calc(l - 0.1) c h).