Color Palette Generator

Harmonies, scales and export in every format.

Color Palette Generator builds palettes from a base colour using colour-theory harmonies — complementary, analogous, triadic, tetradic, split-complementary — and generates perceptually even tint and shade scales for design tokens. Export as CSS variables, Tailwind config, SCSS, JSON or SVG swatches.

This tool needs JavaScript, because the work happens on your device rather than on a server. Everything below — how it works, the FAQ and the related tools — is readable without it.

Loading Color Palette Generator…

Runs entirely on your device. No file or text you enter here is uploaded. How to verify it.

How to use Color Palette Generator

Pick a base colour.
Choose a harmony, or generate a 50-950 scale.
Export as CSS variables, Tailwind config or JSON.

Questions about Color Palette Generator

How are the tint and shade scales generated?

In OKLCH, by holding hue and chroma roughly constant while stepping lightness evenly, with chroma tapered at the extremes. Doing this in HSL gives scales where some steps look identical and others jump, which is the usual failure of generated palettes.

Are the palettes accessible?

Every swatch is checked against both white and black text, showing the ratio and whether it passes AA, carries large text only, or fails. Harmony alone says nothing about legibility, so test any other pairing in the Contrast Checker.

Can I start from an image?

Yes — extract a palette with Color Picker from Image, then bring a colour here to build the full scale around it.

How many colours should an interface palette have?

One brand hue as a full 50–950 scale, one neutral scale, and three status colours — success, warning and danger — covers most products. Long harmony sets look attractive on a swatch sheet and then compete with each other in a real layout, where the neutral scale does most of the work.

Can I paste in a colour I already use?

Yes. The base field accepts hex, rgb(), hsl() and CSS colour names, so an existing brand colour becomes the anchor for the whole scale. There is no import for a full palette at once — build one scale at a time and combine the exported blocks.

Is Color Palette Generator really free, with no limits?

Yes. There is no account, no daily cap, no file-size tier and no watermark, because there is no server cost to recover. The site is funded by clearly disclosed partner recommendations on the Partners page, never by metering the tools.

Are my files or text uploaded when I use Color Palette Generator?

No. Everything is processed by JavaScript running in your browser, on your device. You can verify it: open your browser's developer tools, switch to the Network tab, and use the tool. You will see no request carrying your data — because there is nowhere for it to go.