About Colour Palettes
A colour palette is a small set of colours chosen to work together across a design. Good palettes create visual harmony by deriving every colour from a small number of hues on the colour wheel, varying lightness and saturation instead of jumping randomly between unrelated colours. This is why brand systems, UI themes and editorial designs almost always start with one or two anchor colours and generate everything else from them.
This generator does that derivation for you. Give it a base colour and a harmony mode, and it produces a five-swatch palette with the right relationships already in place — ready to export as CSS variables, Tailwind config, SCSS, JSON or a plain hex list.
The six harmony modes
| Mode | Rule | Best for |
|---|---|---|
| Analogous | Hues ±30° from the base | Calm, cohesive, sophisticated palettes |
| Monochromatic | One hue, varying L and S | Clean, minimal, brand-consistent systems |
| Complementary | Base + 180° opposite | Strong contrast, CTA buttons, badges |
| Split-complementary | Base + 150° + 210° | Softer version of complementary |
| Triadic | Three hues 120° apart | Playful, balanced multi-accent designs |
| Tetradic | Four hues 90° apart | Rich palettes with lots of variety |
Why HSL makes palettes easier
Designers generate palettes in HSL, not RGB, because HSL separates the three things you actually want to control independently:
- Hue — the colour family. Change it to shift the whole palette into a different mood without touching anything else.
- Saturation — how vivid or washed out. Drop it to make a palette feel more muted and editorial.
- Lightness — how close to white or black. Keep it in a pleasing range (usually 25–85%) so colours are readable.
In RGB you would have to adjust all three channels at once to keep a palette harmonious. In HSL you change one number and everything stays in key.
Rules of thumb for a good palette
- One dominant hue. Use one colour for 60% of the design, a second for 30% and the last for 10% of accents.
- Vary lightness more than hue. Shades of the same colour almost always look better than unrelated hues at the same lightness.
- Keep saturation consistent. A palette where one colour is neon and another is dusty tends to feel disjointed.
- Test contrast. At least one colour should pass WCAG AA on white and one should pass on black, so you have a usable text/background pair.
- Anchor with a neutral. Most real palettes include a near-black or near-white for text and surfaces — your five colour swatches are accents, not the whole system.
Common use cases
Brand identity
Define a primary colour and build the rest of the brand palette from it.
UI theming
Populate CSS variables or Tailwind config with a harmonious set.
Data visualisation
Choose distinguishable colours for charts and dashboards.
Print & packaging
Ensure colours stay in tune when converted to CMYK.
App design
Lock a brand colour and generate supporting shades.
Moodboards
Quickly try different harmonies while exploring directions.
Export formats explained
| Format | Where to use it |
|---|---|
| CSS | Drop into :root and use with var(--color-1) |
| Tailwind | Paste into your tailwind.config.js under theme.extend.colors |
| SCSS | Import into a partial and reference as $color-1 |
| JSON | Load in a design token pipeline or a JS app |
| Hex list | Paste into Figma, Photoshop or any tool that accepts a hex list |
Privacy and accuracy
This colour palette generator runs entirely in your browser. All generation happens locally in JavaScript with no server calls. The colours you pick and the palettes you create are never transmitted, stored or logged.