How to choose a color palette (a 5-step method that works)
Updated 2026-09-11 · by the ColorSwoop team
Picking colors is not about taste alone. Follow these five steps and you will land on a palette that looks intentional and works in real interfaces.
1. Decide what the colors need to say
Write down two or three adjectives for the project: calm and trustworthy, bold and playful, premium and quiet. Every color decision downstream should serve those words. Blues and greens tend to read as calm and dependable, warm reds and oranges as energetic, deep tones with metallic accents as premium, pastels as gentle and friendly.
2. Pick one base hue
Choose a single hue that carries the mood. If a brand color already exists, that is your base. If not, browse a mood collection such as pastel, luxury or vibrant palettes and notice which hue keeps drawing you in.
3. Apply a harmony rule
Harmony rules tell you where on the color wheel the other colors should sit relative to your base:
- Monochromatic: shades and tints of one hue. Safe, calm, sometimes flat.
- Analogous: neighbors on the wheel (blue, teal, green). Natural and cohesive.
- Complementary: opposite hues (blue and orange). High energy; use one as the accent only.
- Split-complementary: base plus the two hues either side of its opposite. Contrast without the harshness.
- Triadic: three hues evenly spaced. Vivid and balanced, best with one dominant.
The ColorSwoop generator applies these rules automatically; lock your base color and press space until the companions fit.
4. Assign roles with 60-30-10
A palette is only useful once each color has a job. Give the lightest (or darkest, for dark mode) color the background role and use it on roughly 60% of the surface. Use a second color for large secondary areas such as cards and sections (30%). Reserve the most saturated color for accents: buttons, links and highlights (10%). Add a near-black or near-white for text if the palette does not already contain one.
5. Test in context, not in swatches
Swatches lie. A color that looks great as a square can vanish as small text. Open any ColorSwoop palette and scroll to the UI preview and contrast check: text pairs need at least 4.5:1 to pass WCAG AA. If a pair fails, darken the text or lighten the background rather than throwing the palette away. Our contrast checker suggests the nearest passing shade.
Common mistakes
- Too many saturated colors. One hero color, everything else calmer.
- No neutrals. Real interfaces are mostly neutral; the palette is the seasoning.
- Ignoring dark mode. Check the palette inverted; the generator and preview make this a one-click test.
- Skipping the accessibility check. It takes ten seconds and saves a redesign.
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.