Color Palette Generator

Generate a harmonious colour scheme from a base colour, with HEX codes and swatches.

Colour
Palette
Runs locally in your browser

About the Color Palette Generator

Colour harmony follows relationships on the colour wheel, and this tool builds them from your base colour. Complementary uses the opposite hue for strong contrast; analogous uses neighbours for a calm scheme; triadic and tetradic space hues evenly for balanced, vibrant sets; split complementary softens the complementary pairing; and monochromatic varies the lightness of one hue. Each colour is shown as a swatch with its HEX and HSL values.

The relationships are computed on the HSL wheel by rotating the hue while holding saturation and lightness fixed, which leaves every member of the scheme at roughly the same visual weight. That is a strength in a chart, where the series should compete on equal terms, and a weakness in an interface, where one colour normally has to dominate and the rest recede.

Yellow is the standing exception to any wheel-based rule. At the same saturation and lightness as a blue it reads far brighter to the eye, so a triadic set built from a blue base tends to arrive unbalanced with the yellow member shouting. Drop its lightness by hand rather than trusting the arithmetic.

These schemes are a reliable starting point for a brand palette, a chart colour set, or a UI theme, which you can then refine. To generate lighter and darker variants of a single colour instead, use the Shades Generator; to check any pair for readability, the Contrast Checker.

How to use

  1. Enter a base colour.
  2. Choose a harmony scheme.
  3. Copy the palette's HEX codes.

Common questions

Which scheme should I pick?
Complementary for contrast, analogous for calm, triadic for balanced vibrancy, monochromatic for a single-hue theme.
How are the colours related?
By hue angle on the colour wheel: 180 degrees for complementary, evenly spaced for triadic and tetradic, and so on.
Are the colours accessible together?
Harmony does not guarantee contrast. Check text and background pairs with the Contrast Checker.