Building a Color Palette That Works on Screen

A brand color is a starting point, not a palette. Interfaces need light backgrounds, dark text, borders, hover states, warnings and success messages – all in colors that work together and stay readable. Here is how to build a palette that does all of that.

Start with one strong primary

Pick the color that represents the brand and test it in the places it will be used most: buttons, links and active states. It has to work as a background behind white text and as text on a white background. If it fails one of those, you will need a darker variant for that job.

Build a scale of tints and shades

Generate a scale from very light to very dark, usually ten steps numbered 50 to 900. The light steps become backgrounds and subtle fills, the middle steps are for buttons and icons, and the dark steps are for text on light tints. Tools that work in OKLCH make the steps feel even, because that color space matches how people perceive lightness.

Check contrast while you build the scale, not after. Note which steps pass 4.5:1 against white and which pass against your darkest color, and you will always know which pairs are safe for text.

Don’t forget the neutrals

Most of an interface is grey: text, borders, backgrounds and dividers. Pure greys can feel cold next to a colorful brand, so tint them slightly toward the primary hue. You will need more neutral steps than any other color, especially at the light end for backgrounds and borders.

Add semantic colors

Success, warning, error and information each need their own small scale: a light background, a border and a strong color for text and icons. Keep them recognizable – green for success and red for errors are conventions people rely on – but tune them to sit well next to your brand. And never use color alone to carry meaning; pair it with an icon or a word.

Name colors by role

Once the palette is set, expose it as tokens named by what they do: text, text-muted, surface, border, primary, primary-hover. Components use the role names, not the raw color values. When you change a shade later, you change it in one place.

Plan for dark mode early

Role-based tokens make dark mode much easier: you swap the values behind the names instead of redesigning every screen. Dark surfaces should be dark grey rather than pure black, and saturated colors usually need lighter, softer versions to avoid glowing.

Test it on real screens

Colors look different on a calibrated monitor, an old laptop and a phone in sunlight. Review your palette on several devices, in light and dark rooms, before you call it done. A palette that survives that test will serve the brand for years.