By Sarah McAleer

This blog post was inspired by Talentopoly Podcast Episode #35 – How Developers Can Learn to Design. Justin Belcher was a fabulous guest on the podcast. Having both a computer science and fine art background, he was able to answer questions as a developer and as a designer.

Early on in the podcast, Justin made a good point about when it comes to choosing colors that you need to work at it. He says,

“You have to train your eye to see why does this color seem to work with that. I think the best thing you can do is immerse yourself in harmonious colors…harmonious colors end up having similar temperatures and hues.”

Justin is right. Ultimately, if you want to make choosing colors less of a chore, you have to learn about color and you have to immerse yourself in color. The same goes for learning a programming language. The way you learn a new programming language is by learning what you can and cannot do in the language, the rules of the language, and you surround yourself with examples and people from which you can absorb an understanding and respect for the language.

For this blog post, I am going to use the process of making a choice to explain how to choose colors for a website. Sometimes what causes use to have “designer’s block” in our heads is that we focus on what we don’t know and not on what we do know. We know how to make choices. So let’s use the steps used to make a choice to decide what colors to choose for a website.

Step 1: Know Your Options:

Before we can make a choice, we have to know what our options are. In order, to know what are options are, we have to know a little bit about what we are dealing with. So first, learn the basics of color theory.

Color has it’s own rules and terminology. Being able to “speak” color will make you more confident when choosing colors for yourself and/or for your client.

Right off the bat, here is some color vocab.

Hue is the most basic of color terms and hue denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue.

Saturation is the intensity of a hue from grey. At maximum saturation a color would contain no grey at all. At minimum saturation, a color would contain mostly grey.

Shades are created when black is added to a hue, making it darker.

Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues. Changing the saturation of a color creates a tone.

Value refers to how light or dark a color is (light having a high value).

The above definitions are from a three-part article series on the Smashing Magazine website titled Color Theory for Designers, posted on Talentopoly by Matt Croucher. The definition of saturation is from an article titled Simple and Practical Color Theory on Tutorial9.net.

Now about the color wheel. Sir Isaac Newton developed the first color wheel in 1666. Since then, the color wheel has taken many forms. Google the words “color wheel” in images and you’ll find hundreds of variations. A color wheel will usually be comprised of the three color types: primary, secondary, and tertiary. Primary colors are the three colors of red, blue and yellow. Secondary colors are orange, green and purple. Tertiary colors are made from using one primary color and one secondary color. Besides the primary colors, all colors are made by adding or subtracting other colors.

Image source: Tutorial9.net

Part 3 of the Smashing Magazine article shows how the color wheel is used to create color schemes. A Color scheme, colorway, color palette is an arrangement of harmonious colors. Below are a few of the color scheme types that are based on the color wheel:

Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).

Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel.

Complementary schemes are created by combining colors from opposite sides of the color wheel.

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.

Color scheme definitions source: Smashing Magazine

The other color schemes covered in the Smashing Magazine article are more complex and hurt my brain to think about, but you get the picture.

Interestingly enough, the article points out that, “Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules.” So pulling colors from the sky and not taking in consideration the rules of color is actually the hardest way to create a color scheme.

Step 2: Organizing your options:

One of my first jobs as a production artist was for a fashion brand in the photo studio. Besides taking photos of clothing, I matched fabric samples to printed color chips. To assist me in matching colors, the designers would tell me that a color needed more saturation, or that it needed to have less blue, or a color needed to be brighter, less dull. The fashion designers with the knowledge of color theory were able to choose, adjust, and organize colors.

They organized colors into colorways made up of three groups. The main colors were in group one. The secondary colors that complemented the main colors were placed in group two. And the accent colors, used sparingly, fell into group three.

Another example of organizing color options is from a link shared by Jared Brown on Talentopoly “SOLARIZED: Precision colors for machines and people. Solarized is a color scheme created for terminals, text editors and GUI applications created by Ethan Schoonover and available for free online.

It is obvious that Ethan knows his color theory from how he describes his color scheme. He used the rules of color theory to help him create a harmonious color scheme:

He says, “I designed this colorscheme with both precise CIELAB lightness relationships and a refined set of hues based on fixed color wheel relationships” () – http://ethanschoonover.com/solarized

Ethan organized his colors in a way that was most helpful for the project, and in a way that could be understood by people interested in using his color scheme. Organizing your colors will make it easier for you to use your colors and it will also make it easier to communicate with your client about the colors you chose.

Ethan explains how different colors in his color scheme highlight text while other colors make text less noticeable and therefore intrusive.

Step 3: Creating your options

Knowing a little bit about color, you can create your options. This is the brainstorming part of the process. There is still no pressure to pick the final colors. As with any choice, you want to have a number of options in case one option doesn’t work out.

There are a number of tools online to help you create colorway options. My favorite is Adobe Kuler. Adobe Kuler let’s you create a color scheme from a color, using one color as the base color. When creating a colorway from a color, Kuler gives you the option to “Select a rule” which are color theory rules. When you hover over a rule, the definition of the color theory rule appears. For example, Kuler defines Triad as “Space(ing) your colors in a triangle around the color wheel for a contrasting theme.”

Unlike some tools that do everything for you, Adobe’s Kuler wants to educate its users on color terms and rules.

Kuler also lets you create a color scheme from an image by dragging circular nodes to areas of the image. Color schemer also has a color pick from an image feature. Colorschemer is software that has to be downloaded and costs $50 for the license once the trial version expires. The popular color community website, Colourlovers.com, also lets you create a color scheme from an image. Check this tool out at:http://www.colourlovers.com/photocopa

Other websites that offer tools to create color schemes are: Color Blender,Color Munki, Color Explorer, and Color Rotate.

Creating colors from inspiration is another viable way to create options. I typed in “colorway” on Pinterest.com and found DesignSeeds.com, a blog where each post is a new color scheme based on a photo.

image source: designseeds.com blog post

Using online tools may seem like the easy way out of learning about color, but these online tools use the color wheel and color theory to create color schemes. So knowing about color will help you get the most out of these online tools.

Step 4: Ask Questions of your options:

Once you know what your options are, then you can ask questions to narrow down your choices. A few questions might be “Why am I using this color for this object?” “What does this color mean to my audience?” “What do I want this color to tell my users?” Color psychology has already shown that humans interpret color in particular ways. Becoming familiar with how people look at color will help you to choose colors.

An article by AIGA called “COLOR CODE: WHAT COLOR IS “BRAVE”?” posted on Talentopoly by Abelardo Gonzalez, reminds us that a color can have different meanings for different audiences, especially if that audience is from a different country. For example, “In the West, people wear black for mourning, while in the East (China in particular), white is the color of mourning.”

This brings up another important question when choosing colors, “Who is your audience?”

As far as the West goes, a bunch of websites pretty much agree on the meanings of certain colors. In an article on ThinkBrillant.com, “The Science of Colors in Marketing and Web Design” posted on Talentopoly by me, the author states “While different cultures retain individualistic adherences to colors and schemes alike, in the western world color sentiment is usually depicted as follows:”

Kissmetrics, a web analytics company, has a chart that show how colors affect purchases. Under the heading “Consumer and Color” on the chart, Kissmetrics shows consumers interpretations of colors when shopping at a store.

View info graphic at: http://blog.kissmetrics.com/color-psychology

How a user interprets a color will influence how he/she feels and what action he/she takes next. “What do you want the user to do or think?” Choosing a colorway of soft, warm colors such as oranges and pinks, will give the feeling of lightness, fun, and excitement. Using darker accent colors, say a charcoal black for the buttons with white text for contrast, will make the buttons stand out and be easy to find.

Choosing colors for a website can feel like a daunting task. The importance of colors can be easily overlooked. But if you consider how much color influences how people perceive and how they use your website, then it becomes paramount that you choose colors wisely.

Knowing what your options are, organizing your options, creating options, and weighing your options will help you make an educated decision about the colors you choose for your website. Not only does learning about color help you choose colors, but maybe one day it will help you create your own colors without online tools. Professional designers “mix” their colors in Photoshop and Illustrator. In these programs, they can easily tweak the brightness, saturation, values, and add color, take away color, blend colors and more. When creating your own color, the choices are limitless. It is one thing to have the power to choose, it’s another thing to have the power to create.