Chapter 4 Color

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.


All RGB colors[1]

Challenges

A color is a color isn’t a color...

...not to computers

The first myth worth dispelling is that colors are the same everywhere. In fact, the opposite is probably closer to the truth.

...and not to the human eye

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[6]. 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.

Opportunities

Color strategy

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.

Color tools

Sentiment

Did you know red actually makes people hungry?[7]

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.

Branding

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.)

Facebook

Twitter

Coca-Cola

Status

Bootstrap[8] has popularized the use of status classes[9] which map to certain colors.

Many different apps use this or a similar mapping:

By consistently using #dff0d8 to indicate success or #f2dede to indicate danger, you reinforce a pattern, making it easier for people to understand these concepts in the future.

Motion, Attention

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.

Just about anything

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.

Color schemes

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:

Which color did you mean?

One common color mistake I see frontend developers make is using a gray (e.g. #ccc) 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!

Example

Each of the white boxes below has box-shadow: 0 .125em .5em [color] applied with the color from the respective column.

#ccc

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 #ccc shadow causes visual dissonance with the #85ddba background. Definitely not desired.

Selecting a good default text color

The browser default text color is #000. 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. #333). This has several advantages.

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) instead?

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:

  1. When setting a color with an alpha between 0and 1, the WebKit browser default of -webkit-font-smoothing: subpixel-antialiased will no longer be honored, and you will never get subpixel antialiasing. (It will be as if you’d set that text to -webkit-font-smoothing: antialiased yourself.)

    Which 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[13]) applies -webkit-font-smoothing: antialiased on the entire document.

  2. Performance may be slightly impacted. Remember, you’re now asking the browser to composite the text with whatever was behind it. This may be highly optimized in WebKit, but I wouldn’t count on that anywhere else.

tl;dr

Color is powerful. Pick a good set of colors and stick to it! Really see. If something looks odd, it probably is.


A few sites with bold use of color

Further reading

Citations

  1. Joco: All RGB colors in one image
  2. StackOverflow: Chrome renders colours differently from Safari and Firefox
  3. Apple Support Communities: Why is a Screenshot a different color when dropped back in to iWeb in Safari
  4. Chromium Issues: Inaccurate color profile rendering in Chrome for Mac
  5. Little Big Details: Trello - Color Blind Friendly Mode makes labels distinguishable by pattern.
  6. NPR: Edward Tufte Wants You to See Better
  7. ColorSchemer (via Archive.org): Why food companies use red colors
  8. Bootstrap
  9. Bootstrap: CSS Helper Classes
  10. Codrops: Build a Color Scheme: The Fundamentals
  11. Color Scheme Designer
  12. Adobe Kuler: Color Wheel
  13. Fonts In Use: Medium