How to Build a Color Palette That Actually Works

A memorable design system usually runs on a surprisingly small palette: one or two brand colors, a handful of supporting hues, and a scale of neutrals. The hard part is not picking pretty colors — it is making them work together at every size, on every background, for every state.

Start with one base color

Every palette needs an anchor. Ask what emotion or behavior the color should communicate — a calm product might anchor on a desaturated blue like SteelBlue, while an energetic brand might reach for Crimson. Everything else is derived from that anchor, which is what keeps the palette coherent.

Use harmonies to expand it

Color theory gives you repeatable recipes for supporting colors:

• Complementary colors (180° apart) create contrast and energy — great for calls to action.
• Analogous colors (next to each other) feel calm and cohesive — great for sections and backgrounds.
• Triadic colors (120° apart) are balanced and playful.
• Monochromatic scales (one hue, many lightness levels) are elegant and safe.

Instead of computing these by hand, feed your base color into the palette generator. It produces harmonious palettes automatically, and lets you lock colors you like while randomizing or shifting the rest until the combination feels right.

Add neutrals — they do most of the work

People notice saturated color; they read on neutrals. Add a light neutral for page backgrounds, a mid neutral for borders and secondary text, and a dark neutral for primary text. Warm neutrals pair with warm palettes, cool neutrals with cool palettes.

Test each role against WCAG

Every color in a UI has a job, and each job has a contrast requirement. Text needs 4.5:1 (AA) or 7:1 (AAA) against its background; buttons and icons need 3:1. Check candidate text and background pairs in the contrast checker before you commit — it is far cheaper than re-theming later.

A practical checklist

1. Pick a base color and generate its harmonies.
2. Lock the two or three colors you love.
3. Add a light/mid/dark neutral.
4. Verify text pairs pass at least WCAG AA.
5. Copy the palette and use it consistently.

Export clean, copy-pasteable values

A palette is only useful if your team can adopt it in seconds. The generator exports colors as hex values, CSS variables and JSON, so you can paste a finished scale directly into your stylesheet:

:root {
  --brand: #dc143c;
  --brand-dark: #a00d2f;
  --accent: #f4a340;
  --neutral-100: #f4f4f5;
  --neutral-900: #18181b;
}

Need real-world inspiration? Extract a working palette straight from any photo with the image palette generator, or browse hundreds of named colors with their tints, shades and harmonies in the color library.

The one rule worth breaking most often: start with fewer colors than you think you need. A disciplined two-color-plus-neutrals palette beats a rainbow every time — and your users will thank you for it.