Opens in a new tab

Build a palette from one brand color

A strip of eleven shades of one blue, numbered 50 to 950, with an arrow to the 500 step labeled your brand color. The light end is labeled backgrounds and the dark end text.

A single brand color rarely covers everything a website needs. You’ll usually want a very light version for backgrounds, a slightly darker one for borders, a stronger one for buttons and hover states, and a very dark one for text. Picking each of these by eye, one at a time, tends to produce colors that don’t quite belong together.

A more reliable approach is to build a ramp: 9 to 11 shades of the same hue, running from almost white to almost black. Many design systems name the steps with numbers, like 50 for the lightest and 950 for the darkest, with your original brand color somewhere near the middle. Once the ramp exists, most color choices become a matter of picking a step, which keeps the palette consistent as the site grows. Free palette generators can build a starting ramp in seconds, and you can adjust individual steps from there.

Get Free Design Lessons Every Monday Morning

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close