Color Palette Generator

Generate a colour palette from any starting colour, lock the swatches you like and reroll the rest, then check every foreground/background pair against WCAG AA and AAA before you ship it. Export as CSS custom properties, SCSS, a Tailwind colour object, JSON or an SVG swatch sheet.

How to use Color Palette Generator

  1. Pick a base colour with the picker, or type a HEX, RGB or HSL value — or press Generate for a random starting point.
  2. Choose a harmony: analogous, complementary, split complementary, triadic, tetradic, monochromatic or a tints-and-shades ramp.
  3. Lock the swatches you want to keep, then press the space bar to reroll everything else.
  4. Open the contrast matrix to see which colour pairs pass WCAG AA and AAA, and switch on the colour-blindness preview.
  5. Export the palette as CSS variables, SCSS, a Tailwind config object, JSON or an SVG swatch sheet.

About Color Palette Generator

Picking colours by eye works right up until you have to prove the result is legible. This generator does both halves: it builds harmonies with proper hue geometry — complementary at 180°, triadic at 120°, split complementary at 150° and 210°, tetradic at 90° intervals — and then measures the outcome against the WCAG 2.1 contrast formula, which is a specific calculation on relative luminance rather than anything you can judge by looking. The contrast matrix puts every foreground and background pair in one grid so the combinations that fail are obvious before they reach a stylesheet.

Each swatch reports HEX, RGB and HSL and copies to the clipboard on click, and the whole palette exports as CSS custom properties, SCSS variables, a Tailwind colour object, JSON with contrast ratios included, or an SVG swatch sheet. A tints-and-shades ramp turns any single colour into the familiar 50–950 scale that design systems expect, so a brand colour becomes a usable set of surface, border and text tokens rather than one hex value you keep nudging by hand.

The colour-blindness preview is the part most palette tools leave out. Around one man in twelve has some form of colour vision deficiency, and the most common failure in a UI is a red/green status pair that becomes two identical browns. Switching on protanopia, deuteranopia or tritanopia re-renders every swatch through a standard LMS cone-space transformation, which usually reveals within seconds whether a palette carries meaning through hue alone — and therefore whether it needs a shape, a label or a lightness difference to back it up.

Frequently asked questions

What is a colour harmony and which one should I pick?

A harmony is a rule for spacing hues around the colour wheel. Analogous hues sit next to each other and feel calm — the safest choice for an interface. Complementary hues sit opposite and give maximum contrast, ideal for a single accent against a neutral base. Triadic and tetradic are richer but need a clear dominant colour or they fight each other.

What do the WCAG contrast numbers mean?

The ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 asks for at least 4.5:1 for body text and 3:1 for large text, icons and interface boundaries; AAA raises those to 7:1 and 4.5:1. The matrix shows every pair in the palette so you can see which combinations are actually usable rather than assuming.

How accurate is the colour-blindness simulation?

It converts each colour into linear light, projects it into LMS cone space and applies the standard dichromacy transformation for protanopia, deuteranopia or tritanopia — the same approach used by professional accessibility tooling. It models the complete absence of one cone type, so it shows the worst case rather than the milder anomalous trichromacy most affected people actually have.

Can I export the palette to CSS or Tailwind?

Yes. One click gives you CSS custom properties with RGB and HSL comments, SCSS variables plus a map, a Tailwind theme.extend.colors object, structured JSON including contrast ratios, or an SVG swatch sheet you can drop into a design document.

How does lock and regenerate work?

Click the lock on any swatch to pin it, then press Generate or tap the space bar. Locked colours stay exactly as they are while the rest are rebuilt around a new base hue — the fastest way to converge on a palette when you already know one or two colours must stay.

Is the palette saved anywhere?

Only in your own browser. Your last palette and your options are kept in local storage so the page reopens where you left it; nothing is uploaded, and clearing your browser data clears them.

Related tools

All generators tools · Browse all 56 free tools →