How to Choose a UI Color Palette

Things like hierarchy, white space, and typography are applicable in more or less similar ways from printed page to screen interface. Color, though, is a trickier skill to translate. Not only does color play a critical role in the pacing and interactions of online experiences, but when screens are involved, accessibility becomes a fundamental consideration. Given this multitude of variables, how does one begin to pick a functional and flexible digital palette?

Where Do I Start?

You can’t pick a color palette before establishing the parameters of your project. What are you designing? Why? Who is it for, and in what context will they be interacting with it? How will you be measuring success? Without context or purpose, your design choices will be arbitrary.

If you’re working with an established client, they will most likely have an existing brand palette. Ask for a brand style guide and do the necessary research to understand why those colors were chosen in the first place — you may gain surprising insight into the organization’s history and/or values that will help to inform your work. Color, in this case, will reinforce the integrity of the brand.

If you’re starting from a blank slate, up-front project definition will come in extra handy. Ask yourself what emotions you want your design to evoke, and how those emotions will help you achieve your goals. Then, pick hues that visually reinforce those emotions. Keep in mind that color perception is closely tied with psychology, and that how we interpret colors varies from culture to culture.

Whatever the shape of your project, it’s useful to give yourself constraints when it comes to color. A basic rule of thumb is to pick one or two primary colors that will comprise approximately 60% of the design, a secondary color (30%), and an accent color (10%) that will serve as the foundations of your palette. Not only will this give your design visual balance, it will help reduce decision fatigue (what color should I pick next?) and encourage the use of other design principles (size, layout, typography) to establish hierarchy.

Accessibility

With a color story established, an immediate next step should be to address accessibility issues. Color contrast is paramount when it comes to legibility in apps and online, and performing due diligence in validating your colors up front will save you multiple headaches down the road.

The Web Content Accessibility Guidelines (WCAG) 2.0 state that in order for text to meet level AA criteria (the most common accessibility standard), foreground and background colors must have a contrast ratio of 4.5:1 for normal text and 3:1 for large text (24px+). Keep in mind that any text that appears on your website, be it on a solid color, gradient, or image background, will need to meet these standards. Because of this, you’ll want to make sure your palette can accommodate several color pairs that work well together.

There are a plethora of contrast-checking tools available for free online. One that’s handy for checking your entire palette at once is this open-source Accessible Color Palette Builder that outputs all possible AA-compliant combinations. If you’re willing to spend a few dollars, Contrast is a desktop applet that makes color-picking and testing colors a breeze. And, if you’re a Sketch user, I recommend the Stark plugin — it not only checks contrast, but can simulate various forms of colorblindness.

Fixing Common Problems

As you work through your project, you’ll inevitably try different color combinations and face situations that require tweaking. The following tips can help if you’re stuck wondering what to do next:

My color scheme looks washed out

As you pick colors for interactive elements like button or hover states, you’ll want to make lighter and darker variations on your foundational palette. It’s natural to assume that adding white to a color is all it takes to make it lighter. Likewise with black making it darker. What this actually results in is washed out and/or muddy-looking colors that won’t have the vibrance and contrast you’re looking for.

Try this: Change your color picker in Sketch from RGB to HSB (Hue/Saturation/Brightness). To make a lighter variation of a hue, decrease saturation and increase brightness. To make a darker variation, increase saturation and decrease brightness.

My colors are clashing

Two colors in your palette look great on their own, but they’re difficult to look at when placed together.

Try this: Clashing is usually a result of two colors having the same vibrance. Convert your design to grayscale, and you’ll see that they’re likely close to the same shade of gray. Adjusting the brightness and/or saturation on one or both colors should do the trick. (Side note: This is why you’ll often hear designers suggest designing entirely in grayscale before adding color.)

My colors are drawing unwanted attention

You’re trying to incorporate multiple colors from your palette, but something feels lopsided. Perhaps a tiny navigation button is attracting your eye more than a large call to action. How can you use color to balance out your content?

Try this: Our eyes are naturally drawn to extremes of brightness and saturation. Think of how lighting works in the real world: The most prominent thing in our field of vision is also the most well-lit. As such, treat your design like a stage and light it accordingly. The most important elements should be the brightest or most saturated, and less important elements can be treated in tints or shades.

The brand colors I was given to work with aren’t accessible

Your client has strict brand guidelines, but their palette doesn’t pass accessibility tests — what now?

Try this: Now’s the time to make a case to your client about the importance of accessibility. Offer to create an alternative, accessible digital palette that can live alongside their existing print palette. More likely than not, accessibility wasn’t at the forefront of their mind. They’ll thank you for educating them!

Next Steps

As with most skills, the easiest way to get better at working with digital color palettes is to practice. Every design decision you make should have reasoning behind it, and color is no exception. Mastering the basics will not only give you the vocabulary to communicate your color choices to clients — it will give those choices purpose.