Aridae.com

I mentioned before in my list of 7 easy things to be aware of when laying out an interface that color was something not to be afraid of.  Our goal today is to get through a crash course in color theory, give you as the developer a few different approaches depending on your confidence with using color, and of course I’ll be including a few links I use for tricks and inspiration at the end.

First things first – the color wheel:

At first glance I know it LOOKS like an endless array of choices and clashing colors, arbitrary decisions and potential pitfalls, but think of this to start as just a single possibility.  What color do you feel like using today?  Just pick one.  From there we can “figure out” some other colors that will match without any guessing – honestly!  Typically I would expect you to take “the corporate color” and go from there, but since I don’t have one here… I’m feeling like a nice burnt orange (not a scientific name, but I trust Crayola)

Now from here we go back to our color wheel and use a number of tricks to derive what we call “harmonies” to get some non-clashing color schemes based from the color we already chose.  I’ve ordered them from “safest bet” to “advanced” in how difficult it will be to apply them effectively to your solution.  Note that our burnt orange color is present in each of the bars below – these are all created from the same “starter” color.

	Monochromatic
	This one the most self explanatory, all of these colors are derived by (in painting terms) adding white or black to the original color to achieve tints and shades.  This is a very safe way to find a range of colors that just aren’t going to clash, but it can tend toward boring.

	Analogous
	This set of colors comes from adjacent colors on the color wheel.  They will typically match well & usually make people feel more comfortable than some of our other color sets.  You want make sure you have enough contrast not to not be boring though, as that’s a bit of a hazard here.  Also, keep one color as dominate and use the other 2 for accents – The dominant one might be your original color but also may not, if “the company color” is a majority of the company logo you don’t necessarily want your UI to compete with it for attention.

	Triadic
	These colors are picked as evenly spaced from one another around the wheel.  As a set they’re pretty vibrant, but not as much as straight complementary.  As with the other sets, you should choose a dominate color for most of your work, and use the other 2 as accents on things you want to stand out.

	Complementary
	This new color is the one directly across from our chosen orange on the color wheel, and as a set we refer to this pair as “complementary colors.” These are often used for a high contrast – high energy look.  You do have to be a little careful not to overwhelm a person, but in small quantities of one or the other color you can make an object really stand out.  For example, if you’ve used MS Office 2008 you’ll notice the app as a whole is a bluish color but any “active” button is the complementary orange.

	Split-Complementary
	Created similarly to a simple Complementary set, but instead of taking a single color from opposite our original choice, we take 2 colors from either side of the true complement.  That’s hard to explain, but the image should help.  This gives you the contrast and energy of the Complementary set, but should not be as potentially jarring.  This harmony I would consider easier to implement than a Triadic or straight Complementary, but for explanation sake I had to put it last.

Now that we’ve been through some definitions, suggestions, and risk levels, check out this link and give your new knowledge a spin in a tool that does the work of finding the other colors on the circle for you:

(aka, cheating!)   http://kuler.adobe.com/#create/fromacolor

I typically use that site as well as http://www.colourlovers.com/ to play with colors until I find combinations I like and get the creative juices flowing a bit.  Color is to a great degree subjective, so get out there and play.  Get your hands dirty like with finger-paint… only… there’s no actual getting dirty involved.

There are (as always) other things to consider with color, like its affects on psychology, remembering your users and their probably preferences vs. your own, and using color effectively.  First things first though – go figure out how to make color combinations YOU like until finding good colors isn’t something you dread.  We’ll address the rest in my next 2 posts. J

If you’re interested in a deeper dive into color theory check out http://www.worqx.com/color/index.htm, it’s a great academic look at color and the theories that drive what makes it work. Also, thanks to them for sharing the color wheel images!