Color Palette Generator
Generate matching colour palettes — complementary, triadic, analogous and more — from one base colour, with the colour theory behind each scheme.
Click any swatch to copy its hex code.
"Lightness 50%" does not mean these are equally light
The standard way to build a palette is to fix saturation and lightness and step the hue around the wheel. It produces a set that looks deliberate and behaves nothing like it. Here are twelve hues, every one at HSL saturation 100% and lightness 50%, measured by relative luminance — the quantity accessibility contrast is actually defined on.
| Hue | Colour | Luminance | Contrast on white | On black |
|---|---|---|---|---|
| 0° | #ff0000 | 0.213 | 4.00 | 5.25 ✓ |
| 30° | #ff8000 | 0.366 | 2.53 | 8.31 ✓ |
| 60° | #ffff00 | 0.928 | 1.07 | 19.56 ✓ |
| 90° | #80ff00 | 0.761 | 1.30 | 16.21 ✓ |
| 120° | #00ff00 | 0.715 | 1.37 | 15.30 ✓ |
| 150° | #00ff80 | 0.731 | 1.35 | 15.61 ✓ |
| 180° | #00ffff | 0.787 | 1.25 | 16.75 ✓ |
| 210° | #0080ff | 0.225 | 3.81 | 5.51 ✓ |
| 240° | #0000ff | 0.072 | 8.59 ✓ | 2.44 |
| 270° | #8000ff | 0.118 | 6.26 ✓ | 3.35 |
| 300° | #ff00ff | 0.285 | 3.14 | 6.70 ✓ |
| 330° | #ff0080 | 0.228 | 3.78 | 5.56 ✓ |
Luminance runs from 0.072 to 0.928. The yellow is 12.9 times as luminous as the blue, and the colour model calls them the same lightness.
This is not really a flaw in HSL so much as a misreading of what it offers. HSL is a convenient reshaping of the RGB cube — it makes "same colour, but lighter" easy to express in code. It was never a perceptual model, and its lightness axis does not claim to track how bright anything looks. Green contributes about 71% of perceived luminance, red 21% and blue 7%, and no amount of moving the L slider changes that.
Which is why one text colour never works across a palette
The practical damage lands on text. Of those twelve swatches, 2 carry white text at the 4.5:1 standard and 10 carry black. A rule as simple as "white text on the brand colour" silently fails across most of a palette that was built to be uniform.
Notice that 2 plus 10 is exactly 12 — not one swatch accepts both. That is very nearly forced, and the reason is a neat piece of arithmetic. For any colour whatsoever, its contrast against white multiplied by its contrast against black is exactly 21. Improving one always costs the other by the same factor. To pass both you would need a contrast on white between 4.5 and 4.667 — a window 0.167 wide on a scale that runs to 21 — so almost nothing lands in it.
Two things follow for anyone using a generated palette. Pick the text colour per swatch rather than per palette — every colour here does have one readable option, it just is not the same one. And do not expect a hue-stepped palette to look visually balanced: the yellows and greens will dominate and the blues and purples will recede, which is why designers quietly nudge them by eye.
If you want equal lightness to mean equal lightness, choose colours in a perceptual space
instead. Lab, LCh and OKLCh are all supported in CSS now — oklch(70% 0.15 240) and
oklch(70% 0.15 60) really do look about equally bright, which is the promise
HSL never made.
How to use
- Pick a base colour.
- Choose a harmony scheme.
- Adjust the base until the palette suits.
- Check the combinations for contrast before using them for text.
Frequently asked questions
What is a complementary scheme?
Two colours opposite each other on the colour wheel. The contrast is strong and energetic, which makes it effective for drawing attention to a single element — but exhausting if used in equal amounts. The usual approach is one dominant colour with the complement reserved for accents.
What is an analogous scheme?
Three or more colours adjacent on the wheel, which share an underlying character and so sit together comfortably. It is restful and cohesive, and the risk is the opposite of complementary: it can be too harmonious to create any visual hierarchy, so varying lightness matters.
What is the 60-30-10 rule?
A rough proportion for distributing a palette: about 60 per cent of the space in a dominant colour, 30 in a secondary, and 10 in an accent. It is a starting point rather than a law, and it works because it establishes a clear hierarchy instead of letting colours compete.
Does a harmonious palette guarantee readability?
No, and this is where palette tools mislead. Colour harmony is about aesthetics; readability is about luminance contrast. Two beautifully harmonious colours can be completely illegible together, so every text and background pairing needs checking against a contrast ratio separately.
Should I design for colour blindness?
Yes, and the practical rule is never to rely on colour alone to convey information. Around one in twelve men has some form of colour vision deficiency, most commonly affecting red and green. Adding a shape, a label or a pattern alongside the colour costs little and makes the design work for everyone.
Why do my colours look different on another screen?
Because displays vary in calibration, colour gamut and ambient lighting. An uncalibrated monitor can shift colours noticeably, and phone screens often boost saturation. For anything where colour accuracy matters, checking on several devices is the only practical safeguard.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.