How to Build a Color Palette

A working palette has a few distinct roles. The primary or brand color is the one people associate with you — it carries logos, primary buttons, and links. Secondary or accent colors support it: a contrasting hue used sparingly to draw the eye to something important. Neutrals are the quiet workhorses — the grays, off-whites, and near-blacks used for text, backgrounds, borders, and surfaces. Most of any screen is actually neutral, so getting these right matters more than people expect.

Finally, semantic colors communicate meaning rather than identity: green for success, red for errors and destructive actions, amber for warnings, and often blue for informational states. These should read clearly even to someone who has never seen your brand, so resist the urge to bend them too far toward your house style.

Begin with a single base color — usually your intended brand color. Pick something that fits the mood you want: blues and greens feel calm and trustworthy, reds and oranges feel energetic, purples feel premium or creative. From that one color you can derive an entire palette rather than hunting for every color independently.

Use a color harmony to find companions. Complementary colors sit opposite each other on the color wheel and create strong contrast; analogous colors sit next to each other for a softer, cohesive feel; triadic schemes pull three evenly spaced hues for something more vibrant. A palette generator can produce these instantly so you can compare options side by side.

Then build depth by varying lightness. Take your base hue and create tints (lighter versions, mixing toward white) and shades (darker versions, mixing toward black). A single hue at five to ten lightness steps gives you hover states, backgrounds, borders, and disabled states without introducing new colors. Doing this for your primary, accent, and neutrals turns a handful of base colors into a full, usable scale.

A reliable way to keep a palette from feeling chaotic is the 60-30-10 rule, borrowed from interior design. Roughly 60% of a layout should be your dominant color — usually a neutral background. About 30% is a secondary color that supports and breaks up the dominant space. The final 10% is your accent: the loud, attention-grabbing color reserved for calls to action and highlights.

The key insight is that your boldest color should be the rarest. Accents work precisely because they are scarce — if everything is bright, nothing stands out. When a design feels overwhelming, it is often because the 10% color is doing 40% of the work. Pull it back and the hierarchy reappears.

A palette that looks great in a swatch panel can still fail in real use if text is hard to read. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background: 4.5:1 for normal body text and 3:1 for large text, with a stricter 7:1 available for enhanced accessibility. Check every text-on-background and button color pair against these thresholds.

Do not rely on color alone to convey meaning, since roughly one in twelve men has some form of color vision deficiency. Pair your semantic colors with icons, labels, or shape so an error is still obviously an error in grayscale. Testing your palette in a contrast checker — and viewing it desaturated — catches the problems that swatches hide.

Put it together as a repeatable process. First, choose one base brand color that matches your product's mood. Second, generate harmonious accent options and pick one that contrasts well. Third, build a neutral scale from near-white to near-black, ideally tinted very slightly toward your brand hue so grays feel intentional. Fourth, add semantic colors for success, error, warning, and info. Fifth, expand each into tints and shades for interactive states. Finally, run every important text and button combination through a contrast check and adjust lightness until it passes.

Keep the final set small. Most strong brands run on one primary, one accent, a neutral ramp, and a handful of semantic colors. Save the result as named tokens — such as primary-500 or neutral-100 — so the whole team reaches for the same values instead of inventing new ones.