WotW: Color 101 – Beauty is NOT in the Eye of the Beholder

Of all the things I learned in college, only one concept has stuck with me over the years. Strangely enough, it wasn’t from a course necessary for my degree, but it has profoundly changed my perceptions about the world and has strongly influenced how I approach my career today.

This sage wisdom came from my Intro to Landscape Architecture teacher. He started his lecture one day by saying, “You’ve been lied to your whole life. Beauty is NOT in the eye of the beholder. And I’m going to prove it to you.”

I remember sitting there thinking, “What an idiot, of course beauty is in the eye of the beholder.” Over the course of the next hour, he showed me what beauty really is. And beauty truly is NOT in the eye of the beholder. There are certain elements of beauty that are universal and downright mathematical, and the more you understand these concepts of beauty, the better you will be able to make things beautiful.

Color is one of these concepts. Color plays a big role in our lives. We respond in different ways to specific colors. For instance, orange invokes a feeling of danger, warning or emergency. Green has a natural, clean feeling. Blue is serene and peaceful. Red is powerful and commanding. It’s no wonder brands and logos around the world use carefully selected colors to convey their message. I’ve talked about this at length before.

But today I want to help you choose the right colors for your blog or other projects you may be working on. To help us, we’re going to use an incredibly useful site called Color Scheme Designer. This site helps users develop a color theme that is very mathematical, sound and hopefully beautiful.

To begin with, you have the color wheel. In case you’ve forgotten how a color wheel works, it’s rather simple. The primary colors (red, yellow and blue) are placed at 120 degrees from each other around the circle. In between the primary colors are the secondary colors two primary colors make (in between red and blue is purple, and between blue and yellow is green, etc).

Let’s say you want to re-brand your site or blog and as part of that you want a new color scheme. Successful color schemes aren’t just one color. You need a primary color and one or more secondary color. In this case, when I say primary and secondary, I mean color preferences, not necessarily red/yellow/blue or green/purple/orange.

To get started click on a color you like on the color wheel. This is your primary color for your color scheme. I’m going to choose turquoise, my wife’s favorite color. By default, I am on a mono color scheme, which means only one color, but it contains different values (lights and darks) of that color. This is a good start, but is kind of boring.

By clicking on the Complement circle, a complementary color scheme is generated. A complementary color scheme includes the color directly across from your original color on the color wheel. These colors complement each other well and show good contrast.

But let’s say I want something more. I can choose other color themes. I’ll quickly go over each.

Triad
A triad color scheme includes three colors fairly evenly spaced around the color wheel. This is a good option for having a primary color and two accent colors. Very balanced.

Tetrad
A tetrad color scheme involves four colors in two complementary pairs. This is great for variety, but one color should dominate and the others work as supporting cast.

Analogic
This color scheme includes colors to the immediate left and right of the primary color on the color wheel. While eye pleasing and natural, it may need something more to make a design really pop.

Accented Analogic
This is similar to the analogic scheme, but also contains a complementary color for that added pop, which is great for a primary accent color.

I can’t tell you which color scheme is best for you. Let your eye do the work for you. Check your gut instinct as to whether or not you like a scheme because chances are others will have the same gut reaction.

The Color Scheme Designer site has a few other great features to help with your color selections. First, they have a Light Page/Dark Page option, which brings up a sample website using the color scheme you have selected. This allows you to see how the colors could work together on a site. Very useful for checking your gut feeling.

There’s also a color list, which shows your scheme with a few different values to provide contrast and variety. This also includes the HEX color, a 6-digit color code websites use to display color. If you don’t program your own site, your web designer will be very interested in this information.

Another great feature of the site is its export features. The HTML+CSS option shows the HEX colors of your palette with white and black text over the color, which can help you see how to incorporate text.

You can also export a Photoshop palette to help you design buttons and artwork using your palette.

Color Scheme Designer is a simple, but incredibly useful and powerful website. If you’re in the mood to change something up on your blog, this should be your first stop.