I know what you’re thinking. A whole chapter on colors? Trust me, one chapter is hardly enough. Color is an entire dimension, and it’s incredibly powerful.
The first myth worth dispelling is that colors are the same everywhere. In fact, the opposite is probably closer to the truth.
The way a color appears to the human eye is dependent on many other factors as well, including:
As designers, we need to be aware of these challenges so we can address them. Here are just a few techniques to help:
But remember, nothing is better than seeing. Use your eyes (and the eyes of users you test). Test your color choices on a variety of devices and in a variety of lighting conditions until you feel confident that every user will see something desirable.
As noted above, color is an extremely powerful tool. But with great power comes great responsibility. ;) Colors can be used in so many different ways, but using color for one thing may limit your ability to use it for something else. For example, using a particular green to represent your brand may limit your ability to use that same green to indicate “go”.
A color’s power as an aesthetic tool at least matches its power as a functional one. There may be times when you need to make a trade-off between using a color for one versus the other.
Did you know
actually makes people hungry?
Well, similarly it should be no surprise that colors can affect a person’s mood and opinion in a variety of ways. These effects are subjective and rely heavily on cultural and contextual cues. But they’re very real, so understanding them is crucial.
Do you want to shock people? Do you want to put them at ease? Do you want people to trust you? Do you want them to be excited? Do you want to motivate people to take action? Answering these questions will help you decide on colors for your app.
Colors are so powerful that a single color can suggest a brand.
Can you guess the brand for each of these colors? (Hover to see the answer.)
Many different apps use this or a similar mapping:
By consistently using
to indicate success or
to indicate danger, you reinforce a pattern, making it easier for people to understand these concepts in the future.
Sometimes you want to grab a users’ attention. Transitioning a background color or text color (or simply changing it immediately) can be a great way to do so.
By no means is this meant to be an exhaustive list of the ways in which color can be used as a tool. Use your creativity, and try to think of ways color can be used to reduce the complexity of an existing UI.
Just make sure you don’t go overboard and use too many colors. Using too many colors can cause visual dissonance which makes it hard for a user to focus. When choosing a color scheme, it’s very important to think of how colors relate to one another to avoid such issues.
Picking a color scheme is essential. Some colors go well together and some don’t. There are a number of methodologies out there for picking colors. But the best advice is to use your eyes.
Color schemes can have as few as one non-grayscale color or as many as you want. But I’d caution against using more than three. In the biz, three colors which go well together are known as triads. Here are some great resources on color schemes:
One common color mistake I see frontend developers make is using a gray (e.g.
) when they mean to use black with an alpha (e.g.
rgba(0, 0, 0, 0.2)
But, they look the same!?, you may protest. Well, sure. But only when they’re on white!
Each of the white boxes below has
box-shadow: 0 .125em .5em [color] applied with the color from the respective column.
rgba(0, 0, 0, 0.2)
Both boxes in the first row look fine. But notice how the bottom left white box looks strange. Its
shadow causes visual dissonance with the
background. Definitely not desired.
The browser default text color is
. I think this feels pretty intuitive to most people. Subconsciously, one’s head does something like this: Ink is black. Documents are printed in ink. The web is a set of digital documents. So digital text should be black.
This is totally reasonable, and many great sites are designed with black. But an alternative to this which is better in many situations is to use a gray (e.g.
). This has several advantages.
for emphasis or accents. (This is perhaps the better reason.)
You may be thinking: but you just showed an example where you suggested using black with alpha over gray in situations where the background color may change... so why not set the default text color to
rgba(0, 0, 0, 0.8)
You’d be right, and that’s definitely an option. The main advantage this has is that text on non-white backgrounds will not get any grey+color clashing (as seen in the example above with the white box on the green background). But I wouldn’t recommend it universally for two reasons:
When setting a
color with an alpha between
1, the WebKit browser default of
-webkit-font-smoothing: will no longer be honored, and you will never get subpixel antialiasing. (It will be as if you’d set that text to
font-smoothing is “better” is contextual and fairly subjective. But it definitely feels like subpixel antialiasing is a bandage on a larger problem since: 1) WebKit on retina Macs don’t use subpixel antialiasing (and so it is likely that future high-resolution displays won’t as well), and 2) The popular blogging platform Medium.com (noted for its beautiful typography) applies
-webkit-font-smoothing: on the entire document.
Color is powerful. Pick a good set of colors and stick to it! Really see. If something looks odd, it probably is.