The Magic of CSS

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.

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.

Colors render differently in different browsers.^[2]
Screenshots don’t always capture the same colors.^[3]
Browsers have all sorts of bugs related to color rendering. (Example^[4])

...and not to the human eye

The way a color appears to the human eye is dependent on many other factors as well, including:

Type of device (laptop, desktop, mobile phone)
Distance and angle from the eye
Quality of display (number of colors it can render, accuracy of reproduction, supported viewing angle, maximum contrast, etc.)
Lighting conditions (inside vs. outside, day vs. night, near a window or not, etc.)
Vision of viewer (corrective lenses, visual impairments, colorblindness)

As designers, we need to be aware of these challenges so we can address them. Here are just a few techniques to help:

Choosing colors appropriate for type (and backgrounds of type)
Using skeuomorphism when appropriate to help people recognize objects as they would in the real world
Using contrast to increase readability (nobody can read white on beige)
Using patterns as a fallback for colorblind users when necessary (Trello example^[5])

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:

#428bca = primary
#dff0d8 = success
#d9edf7 = info
#fcf8e3 = warning
#f2dede = danger

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:

Codrops: Build a Color Scheme: The Fundamentals — A great overview on the different types of color combinations (monochromatic, complementary, triadic, tetradic, analogous)^[10]
Color Scheme Designer — A great tool for building color schemes with these types of color combinations^[11]
Adobe Kuler: Color Wheel — Another great color scheme chooser^[12]

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.

The sharp contrast of black on white can create visual artifacts or increase eye strain. (The opposite is also true. This is fairly subjective, but still worth noting.)
You get to “save” #000 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) 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:

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