Skip to content

Color Palette Generator FREE

Build a palette from one colour using the classic harmonies, then check each pair for contrast before you commit to it.

Free to use No registration Privacy-first

HEX, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 ...) or a CSS colour name.

Recent

Palettes

Which pairs are readable

Every colour as text on every other. The number is the WCAG contrast ratio; AA is 4.5:1 for normal text and 3:1 for large text and interface parts.

Copy the palette

Every conversion, palette and contrast figure on this page is computed in your browser. An image you drop in is read on a canvas in this tab and is never uploaded.

How it works

How the harmonies are built

Complementary, analogous, triadic, tetradic, split complementary and square, computed by rotating hue in OKLCH rather than HSL. That matters: rotate a hue 120 degrees in HSL and one of the three results comes out visibly darker than the others, because HSL lightness is an average of channels rather than something the eye measures.

Every colour is shown with its contrast against white and against black, and the palette exports as CSS custom properties, SCSS variables, JSON or a plain list. Nothing is uploaded; the palette is kept in this browser and you can clear it.

Build a better web, faster.

We build custom software and solutions tailored to your needs.

Get in touch