How to choose a color palette for design

Step 1

Start with color roles

A palette isn't a set of favorite colors but a system in which each color has a role. This structure is enough to start:

• •main color: associated with the brand or project and sets the mood;
• •accent: for whatever should draw attention, such as buttons, badges and key numbers;
• •neutrals: a few shades of gray or a muted color for text, backgrounds and dividers;
• •if needed, functional colors: for errors, warnings and success states in interfaces.

💡 A layout usually has far more neutral color than bright color. The accent works precisely because there's little of it.

Step 2

Use the color wheel

Color harmonies are proven ways to combine colors based on their position on the color wheel. Generators such as Adobe Color build them automatically from a base color you choose:

• •monochromatic: one color in different saturation and brightness; the simplest and calmest option;
• •analogous: neighboring colors on the wheel; soft and harmonious;
• •complementary: opposite colors on the wheel; strong contrast, good for accents;
• •split-complementary and triadic: three colors; more variety, but they need care.

💡 A generated harmony is only a starting point. Almost always, make one color dominant and tone down the rest.

Step 3

Take a palette from a reference

If the color wheel feels abstract, start with an image that conveys the mood you want: a photo, a painting, a film still. Adobe Color lets you upload an image and extract a palette from it. Then:

• •keep the three to five extracted colors that best convey the mood;
• •give each one a role from Step 1;
• •add a light and a dark neutral for background and text if they're missing;
• •check how the palette looks on a real layout, not just as color swatches.

Step 4

Check contrast

A beautiful palette is worthless if the text can't be read. The WCAG accessibility standard sets minimum contrast ratios:

• •4.5:1 for regular text against its background;
• •3:1 for large text (18 point and up, or 14 point bold and up);
• •3:1 for essential graphics and the boundaries of interface components against adjacent colors.

💡 Adobe Color has a contrast checker. Check every text-and-background pair that actually appears in the layout, not just the main one.

Step 5

Don't rely on color alone

WCAG requires that color is not the only means of conveying information or distinguishing an element, and Nielsen Norman Group advises against building visual hierarchy on color alone. Some people perceive color differently, so:

• •back up color with an icon, a label, an underline or a shape; for example, mark a form error with text too;
• •preview the palette with a color vision deficiency simulation: Adobe Color has this feature;
• •check the layout in grayscale: if the hierarchy disappears, strengthen the difference with lightness, not just hue.

💡 Share the palette on a real layout in the community and ask for feedback: is the text readable and what do people notice first?