How to generate a colour palette using HSL

HSL is the ideal format for programmatic palette generation because hue, saturation, and lightness are independent and intuitive. To create tints, increase lightness. To create shades, decrease it. To find a complementary colour, add 180° to the hue. To find triadic colours, add 120° and 240°. This guide shows how to use the HSL output from this converter as the starting point for a colour palette in CSS or JavaScript.

Step-by-step guide

1. Convert your base colour to HSL: Paste your brand HEX or RGB colour into the converter. Note the HSL values — for example hsl(24, 100%, 50%).
2. Generate tints and shades by varying lightness: Keep hue and saturation fixed. Increase lightness (60%, 70%, 80%, 90%) for tints. Decrease it (40%, 30%, 20%) for shades. In CSS custom properties: --color-100: hsl(24, 100%, 90%); --color-900: hsl(24, 100%, 20%);
3. Generate complementary colours by rotating hue: Add 180° to the hue for the complement. For hue 24 (orange), the complement is hue 204 (blue). In CSS: calc(24deg + 180deg) or just hardcode 204. Add 120° for triadic, 90° for square, 30° for analogous.

Frequently asked questions

Why do my HSL tints look washed out at high lightness?

High lightness in HSL forces the colour toward white regardless of saturation. For more perceptually uniform tints, use OKLCH or LCH colour spaces, which are available in modern CSS (color: oklch(90% 0.1 24)) and keep perceived saturation consistent at all lightness levels.

How do I use HSL colours in Tailwind CSS?

Define custom colours as CSS custom properties: :root { --color-brand: 24 100% 50%; } then reference them in Tailwind config: colors: { brand: 'hsl(var(--color-brand) / <alpha-value>)' }. The / <alpha-value> syntax enables opacity utilities like bg-brand/50.