Generators

Color Palette Generator

Build a harmonious palette from one colour, with contrast checked.

Base colourOr type a hex code

Complementary

Opposite on the wheel — maximum contrast, good for an accent.

Analogous

Neighbours — calm and cohesive, the safest default.

Triadic

Three evenly spaced — vivid but balanced.

Tetradic

Two complementary pairs — rich, but hard to balance.

Monochromatic

One hue at different lightness — what most interfaces actually use.

Copy as CSS

:root {
  --complementary-1: #5b6cff;
  --complementary-2: #ffee5b;
  --analogous-1: #5bbeff;
  --analogous-2: #5b6cff;
  --analogous-3: #9c5bff;
  --triadic-1: #5b6cff;
  --triadic-2: #ff5b6c;
  --triadic-3: #6cff5b;
  --tetradic-1: #5b6cff;
  --tetradic-2: #ff5bbe;
  --tetradic-3: #ffee5b;
  --tetradic-4: #5bff9c;
  --monochromatic-1: #d6daff;
  --monochromatic-2: #8f9aff;
  --monochromatic-3: #3d51ff;
  --monochromatic-4: #0018eb;
  --monochromatic-5: #001099;
  --monochromatic-6: #000a5c;
}

Each swatch shows whether white or black text passes WCAG on it — AA needs 4.5:1 for normal text and 3:1 for large. Click any swatch to copy its hex code.

Loading tool…

About this color palette generator

Colour harmony rules are shortcuts based on where colours sit on the wheel. Complementary means opposite, which gives maximum contrast. Analogous means neighbouring, which is calm. Triadic means three evenly spaced, which is vivid but balanced.

This generates each scheme from a base colour, gives you the hex codes to copy, and checks how readable white and black text would be on every swatch — because a palette that fails contrast is a palette you will have to redo.

How to use it

Pick a base colour, or paste a hex code.
Browse the generated schemes — complementary, analogous, triadic, tetradic and monochromatic.
Click any swatch to copy its hex code.
Check the contrast markers before committing to a text colour.

Color Palette Generator — FAQ

Which scheme should I use?

Analogous for something calm and cohesive, complementary when you need one element to stand out, triadic for something lively. Most interfaces use a monochromatic base with one accent.

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Each swatch shows whether white or black text passes on it.

Can I export the palette?

Copy the hex codes individually, or copy the whole set as CSS custom properties in one click.

More free tools

🎓GPA & Grade CalculatorWork out your GPA, or what you need on the final to hit a target.🏡Mortgage CalculatorMonthly payment including tax, insurance and the full amortisation.🖥️Aspect Ratio CalculatorResize while keeping proportions, and find the ratio of any size.IVRoman Numeral ConverterConvert numbers to Roman numerals and back, up to 3,999,999.📎Merge PDF FilesCombine several PDFs into one, reorder them, without uploading anything.🔥Calorie & TDEE CalculatorEstimate your daily calorie needs from height, weight, age and activity.

See all tools or take a break with a game.