Color Palette Generator

Give it a base colour and it rotates the hue around the wheel to build six palettes. Tap a swatch to copy its HEX, or copy a whole set as CSS custom properties.

How to use

  1. Set the base colour with a HEX code, rgb(), hsl(), or the picker.
  2. Scan the six palettes — complementary, analogous, triadic and the rest.
  3. Tap a swatch to copy its HEX, or copy the whole set as CSS variables.

The palettes rotate only the hue in HSL and keep the saturation and lightness of your base colour, so a pastel input gives pastel palettes and a saturated input gives saturated ones.

The number on each swatch is the WCAG contrast ratio against the text colour shown. Body text needs 4.5:1, large headings 3:1.

FAQ

How is the complementary colour chosen?

It sits 180° across the colour wheel. The contrast is the strongest available, which makes it good for accents but tiring over large areas — around 10-20% of the space works well.

Which palette should I use?

Analogous or monochromatic are safe over backgrounds and cards. Complementary or split complementary suit the things that must stand out: buttons, badges, alerts.

What does the CSS copy give me?

A list of custom properties named after the set, like `--triadic-1: #3366CC;`, ready to paste into `:root`.

Is my colour sent anywhere?

No. Every conversion and palette is computed in the browser.

Related tools