Introduction to Color in UI Design
Color is defined by computers in numeric systems, and is as much a science as it is an art form. Some colors appear pleasant:
Others are more striking:
Every color appears a certain way to the eye, based on what amount of light is hitting the eye. If you quantify that light, you can represent any color as a number. It's those numbers that computers use, and those numbers can be manipulated to make other colors.
The many colors needed in a UI
Manipulating colors becomes essential because a real UI is going to need a lot more than a handful of colors. Mood boards from Pinterest and screenshots from color palette generators are only the first step in defining an app's colors.
We've discussed how limiting your design tokens is a good idea, and colors are no exception, so consider a few colors taken from a color palette generator like these:
You have a primary color with a blue, a secondary and tertiary accent colors in green and orange, as well as a dark gray and a white to differentiate contrast in texts and backgrounds.
It may seem like enough of a foundation until you actually start designing. Here's a simple dashboard designed with just these 5 colors:
Environments
This UI has:
- buttons it needs
- navigation in guessable locations
- helpful copy to orient users
However, it's almost impossible to see what matters at a glance. There are buttons that prompt a user to "View" something (a low effort action) that use the same primary color (
) as a button to create a "New" something (a higher effort action).Even with some correct UX decisions, poorly used color makes it hard to gauge where to go or what to do in the dashboard.
If we add a few shades to each of those original 5 colors, we can clean up the UI substantially. Here are the original 5 colors, with lighter and darker shades added:
With these shades now included, there's room to use a color like orange as a background for an alert, or a different green as a border. Here's what the UI looks like with these shades thrown into the mix:
Environments
As you may notice, the dashboard feels a little lighter and cleaner. There's less to distract, and different buttons, tags, and alerts can signify varying levels of importance. The "View DNS" button that once loomed large and important, can sink against the background and show that it's only of relative importance when hovered.
Adding these few shades helps here, though in a real application you'll likely need anywhere from 5-10 different shades of each color.
You can switch between the two UIs in this example and see exactly how the changing colors affects the UI:
Environments
- Too few shades can lead to a UI that feels forced and high contrast.
- Taking a few base colors and deriving darker and lighter shades from them helps to reduce contrast between elements.
Relatively few shades from a set of colors may feel like it'll lead to consistency, but will actually result in cases where you're forced into using colors that might not work for their position and importance in the UI.
Here's what the same example looks like side by side:
Environments
Environments
Finding the Sweet Spot: enough of the right colors
On one hand we'd like to constrain the number of choices to as few as possible in the UI so elements remain consistent. And on the other hand we need many colors to design flexibly.
The right number of colors is somewhere in between, and we'll look into how they're defined and good ways to choose them.