How to create a color palette that actually works

Start with the decision, not the color wheel

Write down where the colors will appear before choosing them. A reading app needs a durable canvas and text pair. A campaign poster needs distance legibility. A data product needs ordered and categorical colors. The same attractive blue may be suitable in one context and insufficient in another.

List the required roles: page canvas, raised surface, primary text, secondary text, border, interactive color, focus, and semantic states. You may not need a unique color for each role—shared tokens often make a system calmer—but each role must have a candidate and a tested relationship.

• Audience and viewing conditions
• Screen, print, projection, or mixed output
• Text sizes and interface states
• Brand colors that cannot move
• Emotional tone that supports the task

Choose one anchor, then control lightness

Begin with the color that has the strongest constraint: an existing brand value, a photograph’s key accent, or a hue appropriate to the subject. Do not make five independent choices. One anchor gives the later variations a reason to belong together.

Next create a clear lightness range. You usually need at least one very light surface and one genuinely dark text or canvas color. Middle values can support borders, secondary surfaces, and illustrations. If every swatch sits near the middle, the palette may look sophisticated in isolation but fail to build hierarchy.

Quick test: turn the palette into grayscale. If all five chips become nearly the same gray, the roles are not separated enough.

Use hue harmony after the value structure exists

Analogous colors reduce friction because they sit near one another on the color wheel. Complementary and triadic relationships introduce clearer accents. These are options, not guarantees. A complementary pair with equal lightness can vibrate and still fail as text.

Add the smallest number of hue families that the project needs. A product UI can often use one brand hue plus neutrals and semantic states. An illustration system may need more families, but its interface controls can remain restrained. Separating product function from decorative expression prevents every screen from becoming a color showcase.

• Analogous: calm and continuous
• Complementary: clear emphasis and tension
• Triadic: distinct families for expressive systems
• Mostly neutral + one accent: durable interface hierarchy

Assign color roles and proportions

Name tokens by purpose rather than appearance. “Action-primary” survives a rebrand better than “blue-500.” Keep primitive values underneath, but let components request the semantic role. This also exposes when one color is being asked to mean both “click here” and “danger.”

Try the palette at realistic proportions. The largest surface may cover 60 to 90 percent of a screen, while the strongest accent may occupy less than five percent. A color that is delightful as a chip can become exhausting across a full page. Build one representative screen or poster before finalizing the set.

Test contrast, states, and difficult content

Check actual foreground and background pairs using the WCAG calculation. Normal text generally needs 4.5:1 for AA; large text and meaningful UI boundaries generally need 3:1. Do not stop at the default button. Hover, focus, pressed, selected, disabled, error, and success states all need distinguishable treatments.

Then use difficult content: a long translated label, a low-quality office monitor, bright mobile light, a grayscale screenshot, and a photograph behind the text. Color is only one layer. Icons, labels, patterns, spacing, and type weight must preserve meaning when a user cannot distinguish the hue.

Document decisions so the palette stays coherent

Record each value, its role, approved pairings, prohibited uses, and the reason it exists. Include the source color space and date of review. For a small project this can be one table beside CSS variables; a larger system can connect tokens to tested components.

A palette is never finished merely because a mood board is approved. Revisit it when new content types, themes, states, or accessibility findings appear. Change the fewest foundational values needed, then run the entire pairing matrix again so a local fix does not create a distant failure.

Frequently asked questions