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.

Developer Implementation Guide: Algorithmic Color Generation

While picking colors by eye is great for branding, building a scalable UI system requires a mathematical approach to generating hover states, active states, and borders. HSL (Hue, Saturation, Lightness) makes this programmatic scaling trivial.

Generating Tints and Shades in JavaScript

Here is a lightweight JavaScript function that takes a base HSL color and generates an array of 10 shades (similar to Tailwind's 50-950 scale) by purely manipulating the Lightness value.

function generateHslScale(hue, saturation) {
  // Define the lightness stops from 95% (lightest) to 10% (darkest)
  const lightnessStops = [95, 90, 80, 70, 60, 50, 40, 30, 20, 10];
  const scale = {};

  lightnessStops.forEach((lightness, index) => {
    // We map index 0 to '50', 1 to '100', 2 to '200', etc.
    const stepName = index === 0 ? '50' : (index * 100).toString();
    scale[stepName] = hsl(, %, %);
  });

  return scale;
}

// Example: Generate a blue scale
const blueScale = generateHslScale(210, 100);
console.log(blueScale['500']); // "hsl(210, 100%, 50%)" - The base brand color
console.log(blueScale['900']); // "hsl(210, 100%, 20%)" - Deep dark blue for text
        

This approach guarantees mathematical harmony across your entire application. You can inject these directly into the DOM as CSS Custom Properties (Variables) on the :root element, allowing users to dynamically switch themes or primary brand colors on the fly.