Color Theory for Programmers – Episode 1: The Color Theory Menace

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 color theory series. 

I’ll start this series off slow and bring us all back to the good old days of the elementary school color wheel.

colorwheel.jpg#asset:236

So, here it is: the color wheel. Remember this thing? You’ve got your primary, secondary and tertiary colors. Yes, it seems very simple, but it is very important to grasp how it is made.

colorwheel_primary.jpg#asset:233

Primary Colors

These are your basics which consist of Red, Blue and Yellow. You were thinking RGB weren’t you? That’s ok, those are actually called additive primaries, but we’ll get into that at a later date. Red, blue and yellow are technically called subtractive primary colors and are colors that cannot be created by mixing other colors. I know we’re working with computers and not paints, but bear with me…

colorwheel_secondary.jpg#asset:234

Secondary Colors

If primary colors are your basics, then secondary colors are the outcome of mixing two of the primary colors together. These colors are purple, green and orange. Pretty straight forward, right?

colorwheel_tertiary.jpg#asset:235

Tertiary Colors

Yep, you guessed it. Tertiary colors are a mix of primary and secondary colors. I don’t think I need to spell out all these colors, you get it. Reddish orange, yellowish green and all of that….

There you have it, the color wheel! I’m sure that was just a refresher for most of you, but I can’t tell you how many times I’ve seen brilliant programmers ruin everything with brown and neon green color combinations. Speaking of which, let’s get into color combos.
 

Color Combinations

So far we’ve just jumped into the basics of the color wheel which, I get it, is pretty boring. This is usually why there’s such a huge divide between programmer and designer. If you’re primarily left-brained, then you couldn’t care less about colors. Stick with me, though, and we’ll keep building on the basics.
For example, it might not come as a surprise to you from looking at the wheel’s construction and the placement of the colors, but the color wheel is actually all driven by math! If you want to dive into that, I suggest you checkout EasyRGB. See, it’s not all about touchy-feely stuff and playing with crayons! Let’s keep going down this path and talk about how colors interact.

Complementary Colors

These colors are opposite of each other on the wheel and, for the most part, work best together. They, well, complement each other. Your basic complementary color combinations are blue/orange, red/green, yellow/purple. To bring this into the real world, check out your favorite movie poster. I’m guessing it’s full of complementary colors. In fact, most big time movie posters use the complementary color combination of blue and orange.

Let’s look at The Dark Knight.

darkKnightNormalWheel.jpg#asset:239

I’m sure this poster makes you think of many things, but one thing you don’t question is the colors. It just works. It’s all complementary. (See my super convenient color wheels for reference throughout this post.) If we tweaked the blue to something non-complementary or vibrant, you may have some strange, nagging feeling in the back of your mind.

darkKnightGreenWheel.jpg#asset:238

I would be less excited to see this movie–not to mention the feeling that is tied to specific colors and color combinations. Blue can give the feeling of trust, loyalty, intelligence and, in general, blue is idealistic. If you look at the actual movie poster, those character traits shine through. Green usually connotes a strong relationship with nature and, opposite to blue, a feeling of envy or greed. We will get into specific color psychology in another post, but, with all of that said, my eye is currently twitching looking at that green and orange poster.

There are actually a couple fun tools out there to help all you analytical minds with color theory and combinations. TinEye Labs has a tool that extracts colors from images and there’s also a tool that can generate color relationships based on hex values at Paletton.com. Are you completely stuck wondering what color you should add to a project or feature? Try them out! I’ll show you how.

When I was creating this post, I dropped in the original Dark Knight image into TinEye Labs and it pulled out shades of blue and orange:

darkKnightTineye.jpg#asset:241


From there, I grabbed one of the blues that was extracted and dropped it into Paletton to see what the exact complementary colors were:

darkKnightPaletton.jpg#asset:240

Finally, if you compare the two tools and their outcomes, you get this:

darkKnightExtract.jpg#asset:237

The two images look pretty similar, don’t they? These are great tools to help you keep your colors in check. There are plenty of times when you get handed a project, but a feature gets added without an accompanying design. With these tools, you can at least work with what you have and design something that can fit in seamlessly. Take that, know-it-all designer!  (Hmm, did I just make fun of myself?)


Analogous Colors

These colors are adjacent to each other on the color wheel. Like complementary colors, analogous colors work well together. One of the great artists of our time, Vincent Van Gogh, used a lot of analogous colors in his paintings. He understood that analogous colors are more simplistic and usually found in nature, adding warmth or cool feelings. Bringing it back to movies, lots of independent movies work with analogous colors.

kingsSpeechNormalWheel.jpg#asset:245

Take a look at The King’s Speech poster.  Yellows, reds and oranges. It just feels good. You don’t really think about it when you’re glancing at the poster, but, believe me, the designer thought A LOT about it. If this weren’t built on analogous colors, you could get this:

kingsSpeechBlueWheel.jpg#asset:244

There’s a whole new feeling and it’s because I picked a non-analogous, non-complementary purple to try and work with the yellow/orange background.  It’s a bit wacky and now I feel like this movie will be something slapstick like out of Monty Python. Actually…the design crew at Monty Python does know their color theory!

lifeOfBrianWheel.jpg#asset:246

Look at all of that analogous color, warm golds and oranges all over the place. And what’s that? A complimentary blue ribbon at the top (blue/orange, remember?). It’s a great use of the color wheel. No matter what genre of movie, painting, application, or website, color theory can help get your message across effectively – unless you use it inappropriately.

Now that I’ve run through the basics of primary, secondary and tertiary colors, as well as complimentary and analogous color combinations, I think you’re ready to jump into some actual color psychology. If you can handle a little bit of theory, you can start pushing back at designers’ decisions, and, admit it, that’s really why you’re reading this… right?

In the next blog post I’ll really dive into color theory and psychology, so you will be able to influence people’s thoughts and feelings with color choice and placement. For now, I’ll leave you with Jackson Pollock’s “Blue Poles” to reflect on everything we’ve covered up to this point and lead you into Color Theory for Programmers: Episode 2 – Attack of the ClonesColor Psychology.

blue-poles-number-11-1952.jpg#asset:229