Building a useful color palette

A palette works when every color has a job. Harmony matters, but hierarchy, contrast, and consistency matter more.

Start with a base color

The base color usually carries the strongest brand or emotional association. Before generating variations, decide where it will be used: primary buttons, links, highlights, large surfaces, illustrations, or data visualization. A color that succeeds as an accent may be exhausting as a full-page background.

Tints and shades

A tint moves a color toward white. A shade moves it toward black. These variations are useful for hover states, borders, subtle backgrounds, and emphasis levels. Avoid creating a palette solely by changing opacity over arbitrary backgrounds, because the resulting appearance changes with the surface underneath.

Complementary colors

A complement sits opposite the base hue on a color wheel. Complements create strong separation, which can be useful for calls to action or data categories. Using both at full saturation and equal visual weight can feel aggressive, so one color often works better as the dominant color and the other as a controlled accent.

Analogous colors

Analogous colors sit near one another in hue. They tend to feel cohesive and are useful for gradients, illustrations, or calm visual systems. Because hue separation is limited, make sure important states also differ in lightness, saturation, shape, label, or position.

Build roles, not a bag of swatches

A practical interface palette usually includes surface colors, text colors, borders, primary and secondary actions, focus indicators, and semantic colors for success, warning, and error. Define each role as a design token and check every foreground-background pairing used in the final interface.

Test in context

View the palette on mobile and desktop screens, in bright and dim environments, and with representative content. A mathematically related palette is only a starting point. The final decision should reflect readability, hierarchy, brand character, and the tasks users need to complete.