How to choose a color palette (a 5-step method that works)
Picking colors is not about taste alone. Follow these five steps and you will land on a palette that looks intentional and works in a real interface — not just as four squares on a page.
1. Decide what the colors need to say
Write down two or three adjectives for the project before you look at a single color: calm and trustworthy, bold and playful, premium and quiet. Every color decision downstream should serve those words. The same four-color structure reads completely differently depending on the hue and saturation you pour into it:
2. Pick one base hue
Choose a single hue that carries the mood. If a brand color already exists, that is your base and the rest of this method builds outward from it. If not, browse a mood collection and notice which hue keeps drawing you in — that pull is the decision.
3. Apply a harmony rule
Harmony rules say where on the color wheel the other colors should sit relative to your base. Below, every rule starts from the same blue #2A7DE1, and the companion colors are computed exactly as the generator computes them:
Shades and tints of one hue. Safe, calm, sometimes flat — add a neutral for text.
4. Assign roles with 60-30-10
A palette is only useful once each color has a job. Give the lightest color (or the darkest, for dark mode) the background role and use it on roughly 60% of the surface. A second color takes large secondary areas — cards, sections, sidebars — for about 30%. Reserve the most saturated color for accents: buttons, links, highlights, the 10% that draws the eye.
#EEEEEESecondary · 30% #393E46Accent · 10% #00ADB5Here is the same palette poured into a page. Note that the fourth color, near-black #222831, is doing the text — most palettes need one near-black or near-white for that job even if it is not one of the "pretty" colors.
Design faster with a palette that has roles
Four colors, one page: background, text, a primary action and an accent — the roles a real interface needs.
Primary action Secondary#EEEEEE · text #222831 · primary #00ADB5 · accent #575D65 — open Midnight Coral5. Test in context, not in swatches
Swatches lie. A color that looks great as a square can vanish as small text. The test is a number: text needs a contrast ratio of at least 4.5:1 against its background to pass WCAG AA. When a pair fails, darken the text or lighten the background rather than throwing the palette away — the fix is usually one step in lightness.
Common mistakes
- Ignoring dark mode. Invert the roles — darkest becomes background — and look again. The palette pages have a one-click Invert for exactly this.
- Skipping the accessibility check. It takes ten seconds and saves a redesign.
- Choosing from swatches alone. Always look at the palette as a page before you commit (step 5).
FAQ
How many colors should a palette have?
Three to five. One dominant background, one text color, one primary accent and optionally one or two supporting colors. More than five gets hard to use consistently.
Should I start with a color or a mood?
Start with the mood or the message (calm, energetic, premium, playful), then choose a hue that carries it. If you already have a brand color, build outward from it using a harmony rule.
What is the 60-30-10 rule?
Use your dominant color for about 60% of the surface, a secondary color for 30% and an accent for 10%. It keeps a palette from feeling noisy.
What contrast ratio do I need for text?
WCAG AA asks for 4.5:1 between text and its background for normal text, and 3:1 for large text (18pt, or 14pt bold) and UI components. Aim for 4.5:1 on body text and you will rarely have to think about it again.