How to generate a colour palette in 3 steps
- Pick a base colour — the colour you must keep: a brand colour, a photo's dominant tone, a product colour.
- Choose a harmony — analogous, complementary, triadic or monochromatic (explained below).
- Copy the HEX codes — click any swatch to copy its code into your design tool or CSS.
The four harmonies, in plain words
Analogous palettes take neighbours on the colour wheel (20° and 40° each side). They feel calm and natural — think of a sunset gradient — and suit backgrounds and photo-led designs. Complementary palettes pair a colour with its exact opposite (180° away): maximum contrast and energy, ideal when one colour must pop against another, like a button on a page. Triadic palettes space three hues evenly (120° apart), giving variety that still balances — a favourite for playful brands and illustrations. Monochromatic palettes keep one hue and step only the lightness, which is the safest route to a clean, professional interface.
How it works
Your base colour is converted to HSL, the harmony is applied as hue rotations and lightness steps on the colour wheel, and each result is converted back to HEX. Analogous uses −40°, −20°, base, +20°, +40°. Complementary adds the opposite hue at three lightness levels. Triadic adds +120° and +240°. Monochromatic fixes hue and saturation and walks lightness through 30%, 42%, 54%, 66% and 78%. Everything is computed locally in your browser.
Worked example
Start from pure red, #FF0000, and choose Triadic. Rotating the hue by 120° lands on pure green, #00FF00; another 120° lands on pure blue, #0000FF — the three primary colours of light, perfectly balanced. The generator adds a lighter red and a deeper blue alongside, so the palette is ready to use rather than just theoretical. Switch the same red to Complementary and the partner is cyan, #00FFFF — red's exact opposite on the wheel.
Frequently asked questions
Is this palette generator free?
Yes — free with no signup. Generate as many palettes as you like and copy any HEX code with a click.
Which harmony should I choose for a website?
Start monochromatic for the interface itself (backgrounds, borders, text shades), then add one complementary accent colour for buttons and links. That combination is hard to get wrong.
Can I start from a colour in my photo?
Open the photo in our Image Compressor or editor, note the colour, then enter its HEX here — or find the HEX first with the Loona Color Picker. Palettes built from a real photo's dominant colour always feel coherent.
What does the "Surprise me" button do?
It picks a random pleasant base colour (vivid but not neon) and rebuilds the palette in the harmony you selected — a fast way to break a design block.
Are these palettes accessible?
A palette is a starting point, not a guarantee. Before using two palette colours as text and background, run them through the Loona Contrast Checker to confirm they meet WCAG AA.
More free photo tools
Compress photos to an exact KB size — 50KB, 100KB, 200KB.
Resize by pixels, cm or inches, with a print DPI setting.
Free crop plus ready ratios — 1:1, 4:3, passport and more.
Convert JPG, PNG and WebP both ways, with quality control.
Fix brightness, contrast and sharpness in seconds.
Turn a photo background white, blue or light grey.
Turn one or more photos into a single PDF file.
Add a text watermark — set size, colour, opacity, position or tile it.
Pick any colour and copy its HEX, RGB, HSL and HSV values.
Check text and background colours against WCAG AA and AAA.
Build linear gradients and copy the CSS code instantly.