Choose a colour palette by starting from one colour you have an actual reason for — a brand colour, a product colour, something in a photograph you cannot change — and deriving everything else from it. A working palette is one dominant hue, one accent far enough away from it to be noticed, five or six neutrals that will cover most of the screen, and four or five variants of each colour for hover, focus and disabled states. A harmony rule decides exactly one of those things. That is why a palette that looks confident as a row of swatches can still fall apart the moment it meets a real page.
Where the first colour comes from
No generator answers "what colour should my thing be". Answer it with a constraint rather than taste, because a constraint is defensible six months later and a preference is not:
- A brand colour you already own. If one exists, it is the base, whether or not you like it.
- The dominant colour of the photography the design has to sit next to. Interface colour fighting product photography is a fight the photography wins.
- The convention of the category — finance leans blue, food leans warm, developer tools lean dark. Breaking a convention is fine, but do it on purpose.
- Whatever your nearest competitor has not taken. Two blue logos in the same market is one blue logo people remember and one they do not.
Whichever you pick, pick a saturated version of it. You can always drain saturation out later. You cannot rotate the hue of something that is already near-grey and expect the other swatches to look different — they will come back as five almost identical colours with five genuinely different hex codes, which is the most confusing failure mode there is.
Which harmony rule to pick
All six of the usual rules are the same operation: take your base hue, move a fixed number of degrees around the wheel, keep the saturation, adjust the lightness. The names sound like theory and describe arithmetic.
| Rule | What it does | Reach for it when |
|---|---|---|
| Monochromatic | One hue, several lightnesses | You want calm and you will borrow an accent from somewhere else |
| Analogous | Neighbours within about 60° | Coherence matters more than any single element standing out |
| Complementary | The hue 180° away | One element — usually a button — has to shout |
| Split complementary | The two hues either side of the opposite | You want that contrast without the vibrating edge pure complements get |
| Triadic / square | Three or four hues, evenly spaced | Colour is content: illustration, charts, a marketing page |
Reading about them is slower than looking at them. Drop your base colour into the palette generator here and step through the six rules; you will know quickly which two are worth considering, and the export box gives you the hexes as CSS custom properties, SCSS variables, a JSON array or a plain list.
Expect one surprise. These rules run on the RGB wheel your screen uses, not the red-yellow-blue wheel from art class. Opposite blue you get yellow, not orange. Neither is wrong — pigment and light behave differently — but that mismatch is usually why a complementary result looks unfamiliar.
How many colours you actually need
Five swatches is an output, not a plan. Almost every interface that reads as well-designed is running on two hues: a dominant one and an accent, with everything else carried by neutrals.
The common guidance is roughly 60% of the surface in the dominant colour, 30% in a secondary, 10% in the accent. Whether or not you take those exact figures, the point behind them is real: a palette is proportions, and a row of equal-sized swatches hides proportion completely. Two colours that look balanced side by side can be unbearable when one of them is the page background and the other is every heading.
The cheap test is to paint the real thing: background, one card, one heading, one paragraph, one button, one link. Five minutes of that beats an hour of staring at swatches.
Most of your palette is grey
Count the genuinely coloured pixels on any product you admire. Text, borders, dividers, backgrounds, disabled controls, placeholder text — all neutral, and no harmony rule generates one of them. That is why "pick a palette" feels finished long before it is.
Build six, and give them roles rather than numbers: page background, raised surface, border, muted text, body text, headings. Two things make them look deliberate:
- Tint them. Mix a few points of your base hue into each — around 4 to 8% saturation is enough to notice and not enough to read as a colour. Pure
#808080is the visual equivalent of Times New Roman. - Do not use pure black for text. Something around
#1A1A1Aon white still clears the 4.5:1 threshold with room to spare, and it reads as a decision rather than a default nobody changed. Pure black is a convention from print, where the paper is not emitting light at you.
Every colour needs four or five versions
A button is not one colour. It is a resting colour, a hover colour, an active colour, a focus ring and a disabled state, and if you only defined the first one, the other four will get invented under deadline by whoever is writing the component.
Derive them by moving lightness, not hue: 6 to 10 points darker for hover on a light theme, a little further for active. Keep the hue and saturation fixed, or the button changes identity when you touch it. The focus ring is the one that needs planning, because it has to be visible against the button and against whatever is behind the button — often that means a separate colour rather than a shade of the accent.
Disabled states are where palettes quietly fail accessibility. Greying a control out is a legitimate signal; a label nobody can read is a bug that passed review because everybody already knew what the button said.
Check contrast before you get attached
Harmony rules know about hue and nothing about legibility. Two colours can be a textbook complementary pair and still be unreadable as text on each other.
The thresholds are short enough to memorise: 4.5:1 for body text, 3:1 for large text and for interface components like borders and focus indicators. Run every text-and-background pair you plan to use through a contrast checker before the palette hardens, not after the components are built.
The pair that fails most often is a mid-tone accent with white text on it. Take a mid blue, #3B82F6: against white it measures 3.7:1, which passes for a 24 px heading and fails for a 14 px label. Its HSL lightness is about 60% — drop that to 50% and you get #0B64F4 at 5.1:1, which passes both. Greens are worse, because your eye reads green as much brighter than blue: a saturated #22C55E with white on it is only 2.3:1. Ten points of lightness takes it to 3.6:1, still a fail; it needs about fifteen. If you want the detail on what counts as large text and where the ratio itself is misleading, the contrast ratio thresholds explained covers it properly.
Why one swatch always looks too bright
Harmony generators work in HSL, and HSL lightness is arithmetic, not perception. Yellow at 50% lightness looks blindingly brighter than blue at 50% lightness, because human vision weights green far more heavily than blue. In any palette that includes a yellow or a cyan, that swatch will look like it is glowing next to the others even though the numbers say they match.
There is no trick here. Adjust it by hand, or work in a perceptual colour space instead — the difference between HEX, RGB and HSL goes into why HSL lightness behaves this way and what OKLCH does about it.
Three checks before you commit
- Greyscale it. Screenshot your mockup and desaturate it. If the button no longer stands out, it was never standing out on contrast — it was relying on hue, and hue is the first thing to go.
- Assume someone cannot see the difference. Red-green colour vision deficiency is common: around one man in twelve and one woman in two hundred of Northern European descent, and lower but far from rare in other populations. Two swatches 120° apart on the wheel can still be indistinguishable to them.
- Never let colour carry meaning alone. An error state is red and has an icon, or red and says what went wrong. Red by itself is decoration that some of your users will miss.
None of those takes a minute, and each one catches a class of problem that is expensive to fix once the components exist.
The fastest way through the first half of this is to put your base colour into the colour palette generator, cycle the harmony rules until two of them look plausible, and copy the hexes out as CSS custom properties — then spend the rest of your time on the neutrals and states it deliberately does not produce.
The moment two of those colours end up in the same gradient, a new problem appears: the midpoint often turns grey and muddy for reasons that have nothing to do with your choice of hues. Why CSS gradients go muddy in the middle explains what the browser is doing between your two stops and how to stop it.
Frequently asked questions
How do I choose a colour palette for a website?
Start from one colour you have a reason for — an existing brand colour, the dominant colour of your photography, or a hue your competitors have not claimed. Use a harmony rule to derive one accent from it, then build five or six neutrals separately, because neutrals will cover most of the screen. Check every text-on-background pair for contrast before you commit to any of it.
What is the 60-30-10 rule in design?
It is a rough guide to proportion: about 60% of a surface in the dominant colour, 30% in a secondary one, and 10% in the accent. The exact numbers matter less than the idea behind them, which is that a palette is proportions rather than a set of swatches. A row of equal-sized colour chips hides the proportion entirely, so mock up a real screen before you decide.
How many colours should a website use?
Two hues is plenty for most interfaces: one dominant and one accent. What you actually need more of is neutrals — five or six greys for backgrounds, borders and text — plus four or five variants of each hue for hover, active, focus and disabled states. Adding a third hue later is far easier than removing one that is already everywhere.
How do I pick colours that look good together?
Fix one colour and move a set number of degrees around the hue wheel: 180 degrees for a complementary pair, 30 or 60 degrees for analogous neighbours, 120 degrees for a triad. Keep saturation the same across the set so the colours read as a family. Note that this is the RGB wheel, where the opposite of blue is yellow rather than the orange a painter would expect.
How do I know if my colour palette is accessible?
Test each text-and-background pair against the WCAG thresholds: 4.5:1 for body text and 3:1 for large text and interface components such as borders and focus rings. Then desaturate a screenshot and check that the important elements still stand out, since red-green colour vision deficiency affects roughly one man in twelve of Northern European descent. Colour should never be the only thing carrying a meaning.
Last updated September 19, 2026