Color Theory for Programmers – Episode 2: Attack of the Active Colors

Do you view colors just as hex codes and your default color palette consists of #000, #fff and #ff0000? Are you a programmer that gets completely frustrated with know-it-all designers? Well, I’m a know-it-all designer (and I resent that!), as well as a programmer, so I understand how frustrating things can be on both sides of the conversation. Hopefully I can help bridge the gap in this second episode of our color theory series.

If you happened to read Episode I, you may recall that I ended with the above painting by Jackson Pollock entitled, “Blue Poles.” Yes, Jackson Pollock was one of my favorite painters and I will insert him anywhere I can, but it is important to know that I didn’t choose this image at random. It’s the perfect image to recap the color wheel discussion, and it also opens the door for Episode II’s color psychology discussion:

The painting uses yellows and oranges (analogous colors) along with blue columns of color (orange and blue are complementary colors) to provide depth to the image. Wait, depth? You may be asking yourself why the hell you need depth in web development. Well, let’s see if I can answer that in this post.

Creating Depth with Active and Passive Colors

Hopefully, I haven’t already lost your interest with “active” and “passive.” Stay with me, because this is where we get a little touchy-feely with colors but it is very important to grasp these concepts. If you do, you can start challenging designers.

Going back to the color wheel, you can divide it up into visually active and passive colors. Active colors really pop when you place them next to passive colors, while passive colors recede when placed next to active colors.colorpsychology1.png

Exhibit A: this homepage from Buffalo. With your knowledge from Episode I, you should recognize that the main colors in this layout are complementary. It just feels good. (I said we were going to get touchy-feely!)

When you look at Buffalo, what seems to be jumping out at you? Hopefully, it’s the orange and teal hexagons. (Yes, the buffalo icon, header text, and dark middle hexagon should also grab your eye.) For the most part, this page is made up of orange, teal, green, and variations of gray. Orange is the most active color, followed by teal and then green.

If you imagine this page as a flat plane, the most active color should be the closest thing to your eye, followed by the 2nd most active color and so on:

The most active color is determined by brightness. In the above image, orange is brighter than the teal, while the teal is brighter than the dark, dull green, and that dark, dull green is brighter than the grays and black. The passive colors tend to be darker, duller or more muted than the active colors. The passive nature of the colors make them recede into the background, creating the sense of depth. When active and passive colors are positioned next to one another, they really push each other into the foreground and the background respectively.

Another example, designed by yours truly at The Atom Group, is the home page for Popular Direct. Among many other things, the main goal of this page was to target three areas at the same time. We needed to show the main navigation for rate shoppers, the featured promotion in the middle of the page to push the latest and greatest deals and we needed to target financial novices (in the lower right) to guide them through Popular Direct’s product offerings.

To achieve this, I needed to think about active and passive colors. So, I dulled the full-bleed image in the background and overlaid dark blue across the whole image. That set the passive base for the rest of the page. Since Popular Direct wanted 3 areas with (somewhat) equal attention, I used the most active color—white—in all three areas to draw the user’s eye while using more or less active colors as accents (red and light blue). If I did my job correctly, your eye should hit that lower right red area (#1: financial novices), travel up to the light blue “learn more” button (#2: promotional), then move up diagonally to the logo/navigation (#3: rate shoppers).

“Umm, ok. I’m a programmer/future-graphic-design-rockstar, so why the hell do I care about depth and active/passive colors?!”

By utilizing depth or active/passive color schemes in a web setting, you can start to tap into the psychology of the user and direct their eye, as well as their mouse, to wherever you want. (Yeah, read that one again. This is what you came here for.)

If you looked at our first example's analytics, I would bet anything (including my sweet Yorkie, Chewbacca) that the orange hexagons are clicked most, followed by the teal. After those, perhaps, that black hexagon because it has high contrast to the colored ones (we’ll get into that in our next episode). As a savvy developer or marketer-extraordinaire, you would put the content to which you most want to direct site visitors behind the orange tiles.

Look at that! With a tiny bit of color theory and a sweet new concept of active/passive colors, you’ve just tapped into the user’s brain and told them where to click and how to navigate through your site without saying, “Click here!”

So, to sum up this concept: Active colors are bright and ‘activate’ the eye; you are drawn toward them because they seem to jump off the page (or screen). Passive colors are dull or muted; they tend to recede into the background and, when positioned next to a more active color, create a sense of depth. Utilizing these color concepts together in your digital design strategy will help you manipulate the user’s brain into (for the most part) doing what you want them to do.