How to choose a color palette

Decide what the palette has to do

Write down the answers before opening a color picker. They eliminate most of the search space:

• How long will someone look at it? A dashboard held open for eight hours wants low chroma in the large areas. A landing page seen for forty seconds can afford saturation.
• How much of the screen is data? If the content is charts and tables, the interface colors have to recede so the data colors can carry meaning.
• Is there a fixed brand color? If so it is an input, not a decision.
• Light, dark, or both? Both means two palettes, planned together.
• Which colors already mean something in your domain? Red for a decline in finance, red for danger in an industrial control — the same hue, opposite emotional load.

The neutral is the biggest decision

Ninety percent of a typical interface is background, surface, text and border — all neutral. The neutral sets the character of the product far more than the accent does, and it is the part most palette exercises skip.

The choice is how much chroma to put in it. A pure grey ramp (C = 0) is neutral in the literal sense and can read as cold or cheap. A ramp with a small amount of chroma — 0.01 to 0.03 in OKLCH — carried at the hue of your primary makes the whole interface feel deliberate, and at that level nobody perceives it as a color. Push past about 0.05 and the background starts competing with the content.

Two neutrals that read very differently at the same lightness: #71717A is grey with a hint of blue-violet, #78716C is grey with a hint of warm brown. Neither looks colored on its own; a page built out of one does not look like a page built out of the other.

Pick one anchor hue

One hue, chosen for a reason, then everything else derived from it. Reasons that hold up: it is the brand color; it is the convention in the domain (blue in finance and enterprise software, green in health and sustainability); it is deliberately not the convention, because standing out is the point; it is the hue that reads best against the content, which for photography-heavy products usually means a quiet one.

Then check the anchor for two practical properties before committing. Does it have a step that carries white text at 4.5:1 and a step that works as a light background? Hues around yellow and cyan are difficult here — they reach maximum chroma at high lightness, so a saturated version cannot carry white text at all and the version that can looks muddy. And does it survive simulation next to the colors it will sit beside?

Choose a harmony for a reason

Harmonies are hue-spacing recipes. They are useful as starting points and are not a guarantee of anything — the spacing decides how related the colors feel, and lightness decides whether the palette works.

The one rule that matters more than the recipe: vary lightness. Two colors 180° apart at the same lightness vibrate against each other and are indistinguishable in greyscale. Two colors 30° apart with a 40-point lightness gap look composed and work everywhere.

How many colors

Five roles is a complete interface: background, surface, text, primary, accent. Add the three status colors — success, warning, danger — and you have eight, which is what most design systems ship. What you need is not more hues but more steps: each of those eight expanded to a 50–950 ramp is eighty-eight values, and that is what covers hover, border, muted and disabled without improvising.

A palette with twelve distinct hues is not richer, it is undecided. If you cannot name what each color is for, remove it.

Test it on a layout, not a strip

A swatch strip shows colors at equal size, side by side, with nothing on top of anything. That is the one arrangement an interface never uses. Put the palette on an actual layout before committing: a nav bar, a card with a heading and body copy, a primary and a secondary button, a form field with a label and an error state, a table with alternating rows, and a disabled control.

Almost every problem shows up in that layout and in none of them shows up in the strip — the accent that disappears against the surface, the border that vanishes, the muted caption that fails contrast, the two status colors that are the same color.

Try a palette on a real layout

A worked example

A reporting dashboard, held open all day, blue as the domain convention, one brand accent, light and dark themes required.

1. Neutral first. A grey ramp carrying 0.012 chroma at hue 265 — cool, quiet, not obviously colored.
2. Anchor. Blue at hue 255. Its 600 step carries white text at 4.5:1 and its 100 step works as a selected-row background.
3. Accent. Split complementary at hue 35, used only on the single primary action per screen.
4. Status. Green 145, amber 75, red 25 — chosen at different lightness steps (500, 600, 550) so they separate in greyscale rather than by hue.
5. Ramps. Each of the five expanded to 50–950 in OKLCH.
6. Check. Every role pairing graded, then the same again for the dark theme with the ramp read from the other end.

The aesthetic decisions in that list are two hue numbers. Everything else was determined by the constraints, which is the point.

What goes wrong

1. Starting with the accent. The accent is 2% of the pixels and the last thing that should be locked.
2. Skipping the neutral. Reaching for a default grey wastes the decision that shapes the product most.
3. All colors at the same lightness. The palette looks balanced as a strip and has no usable text pair.
4. Copying a palette without its context. A palette built for a marketing site behaves differently in a data table.
5. Deciding on the strip. See above — test on a layout.

Checklist

• The palette's job is written down before any color is chosen
• The neutral ramp is a deliberate choice, including its chroma
• One anchor hue, chosen for a stated reason
• The anchor has a step that carries white text and a step that works as a tint
• Harmony chosen for the relationship it creates, not by default
• Lightness varies across the palette
• Every color has a named job, or it is removed
• Each color expanded to a 50–950 ramp
• Tested on nav, card, buttons, form, table and disabled states
• Checked for contrast and under color vision simulation

Frequently asked questions