Color Palette Generator — From One Colour, Free

Pick one colour and get a working palette: a nine-step tint-and-shade scale (the shape design tokens use), plus complementary, analogous, triadic and split-complementary harmonies. Click any swatch to copy its hex; export the scale as CSS variables or the whole set as JSON.

The harmonies are computed in HSL — hue rotations at your colour's own saturation and lightness — so they stay related instead of random.

How to use Color Palette Generator

Pick a base colour — the picker, a hex code, or the random button.
Use the scale for your UI: light steps for backgrounds, the middle for the brand itself, dark steps for text and hovers.
Pick an accent from a harmony — split-complementary is the safest interesting choice.
Export as CSS variables (--color-100 … --color-900) or JSON.

What each harmony is for

Complementary (opposite): maximum contrast — strong for a single accent, exhausting as a whole scheme.
Analogous (neighbours): harmonious and calm; needs a neutral or an accent from elsewhere to avoid monotony.
Triadic (three equidistant): vibrant but balanced — use one as dominant, the others sparingly.
Split-complementary: the contrast of complementary with less tension — the most forgiving choice for a two-accent scheme.

The 60-30-10 rule

The classic proportion for applying any palette: ~60% dominant (usually a near-neutral from your light tints), ~30% secondary, ~10% accent. Most "too colourful" designs are palettes applied in equal parts — the palette was fine, the proportions weren't.

Why the scale matters more than the harmonies

Real interfaces spend most of their colour budget on one hue at many lightnesses — backgrounds, borders, hovers, text — which is exactly what the 100–900 scale provides. Check text/background pairs from the scale with the contrast checker: the 600+ steps on white, and 100/200 under dark text, are usually the accessible combinations.

Frequently asked questions

Which harmony should I actually use?

For interfaces: mostly none of them — use the tint/shade scale for 90% of the UI and pick ONE accent, for which split-complementary is the safest interesting source. Harmonies shine in illustration and branding, where multiple strong hues genuinely coexist.

What are the 100–900 numbers in the export?

The design-token convention (Tailwind, Material): 100 is the lightest tint, 500 the base region, 900 the darkest shade. Naming by lightness step means components can say "border-300, text-700" and survive a rebrand — swap the scale, keep the code.

Are these palettes accessible?

Accessibility is a property of pairs, not palettes — it depends which colours sit on which. Rule of thumb from the scale: 600+ works as text on white, 100–200 as backgrounds under dark text. Verify the pairs you actually use with the contrast checker.

Why HSL rather than fancier colour spaces?

HSL's hue rotations are the classical definition of these harmonies and are wholly predictable. Perceptual spaces (OKLCH) produce more uniform-looking steps at the cost of less obvious relationships. For a starting-point generator, predictable wins; refine by eye from there.