You may never think about color when you design. You may just think what looks good is what is good. Well think again, because it goes much deeper than that.

This week I want to begin talking about color theory. Before I do, I want to stress that some of this is hard and true “Color Theory” as it has been written for the past 100 years. Some of it is my own personal opinion about color. As an artist we must rely on intuition as much as we rely on theory and practice. It’s like a musician; you can teach them all the music theory you want, buy you should never “train-out” their ear. That’s what makes them an artist. Let’s begin this week by talking about some really simple ideas about color and then move on later to more complex ideas, psychology and practice.

I am going to introduce you to a term in color theory called “analogous color”. What this means is that you have a series of colors that are the same hue, but a different shade or saturation value. Look at the image below to see what I mean.

Here is a series of brown colors going from a dark shade to a light one. You should be able to feel a sense of something with this color scheme, but we will talk about that later. What we have here is a series of analogous colors. Now brown isn’t the best example, so let’s look at blue.

Here we have the same series, but with blues. Now, analogous colors can be any hue. If you were using a greyscale version, they would go from black to white through a series of grays. Technically, black and white are not colors per se, but you get the idea right?

So why do you care? Well, you care because the values you choose in your color scheme whether your scheme is for print, the web, or anything is vitally important. Choosing analogous color schemes is very useful for tying together elements in a layout. You can use it to evoke a sense of structure, simplicity and sophistication. It is also useful as an underlying color scheme, for which elements can compliment it. We will talk about complimentary colors later, but think about how often you see combinations of blue and orange, or blue and yellow on the web. Those colors are complimentary to one-another.

The level of saturation in color is important in making sure your color scheme works. Take a look at the image below.

This is the blue image that has been completely saturated. I used the Hue and Saturation command in Photoshop to do this. See how different it feels from this next image.

The first image is not my idea of sophistication. Typically, web sites and print material that are trying to evoke calm, structure and maturity use soft, desaturated colors. Full saturation is sometimes useful for work that is aimed at younger folks.

Just for clarity here are the brown images to look at.

The saturated one:

The desaturated one:

So that is your first taste of color theory. We will continue to talk about this and how to work with color in Photoshop in the next few columns.

11 Comments

1. Ginger said on — June 9, 2008 @ 8:00 pm

   Thank you. Am looking forward to more color theory information.

2. jonathan said on — June 30, 2008 @ 8:39 pm

   I think this is teaching indeed.

3. Bob Murray said on — November 1, 2008 @ 5:24 am

   Well-presented. It’s always enlightening to go back to basics.

4. 50+ Free Open Courseware Classes for Web Designers Perfecting Their Craft | Distance Learning Net Pingback on — January 21, 2009 @ 9:55 am

   [...] Color Theory 101: This course will help you learn more about the thought behind color theory. [Planet Photoshop] [...]

5. Web Design.edu: Top 50 Free Open Courseware Classes to Design Better Web Sites — Best Web Design Schools Pingback on — February 19, 2009 @ 2:06 am

   [...] Color Theory 101: Color theory made simple [Planet Photoshop] [...]

6. Ada said on — May 12, 2009 @ 10:55 pm

   I think the example for analogous is more of an example of monochromatic… an analogous color scheme tends to refer to different hues that are next to each other on the color wheel (red, yellow, and orange for example).

7. dr.emi said on — May 13, 2009 @ 6:35 pm

   thank you!

   I founded your site from psdtuts.com. your color concept userfull fot me

8. Thrifty Thursday: The Power of Free Knowledge | 12pointtype.com Pingback on — May 28, 2009 @ 9:11 am

   [...] Color Theory 101 [Planet Photoshop] [...]

9. Bookmarks Reading 06 June 2009 Through 10 June 2009 — I Am Pariah Pingback on — June 10, 2009 @ 3:00 pm

   [...] Illustrator, InCopy, QuarkXPress, and Acrobat tutorials, tips, tricks, articles, news, and reviewsColor Theory 101, Part 1 | Planet Photoshop – Twitter to Launch Verified Accounts – It looks like a lawsuit was the final push TwitterTwitter [...]

10. 100 Free Cutting-Edge Courses for Web Developers & Designers | Online Universities Weblog Pingback on — September 30, 2009 @ 11:27 am

    [...] Color Theory 101: You may have a natural ability to use colors well, but this course will teach you the theory behind why certain things look good and others not so much. [Planet Photoshop] [...]

11. 100 Free Cutting-Edge Courses for Web Developers & Designers « Caintech.co.uk Pingback on — October 3, 2009 @ 6:00 pm

    [...] Color Theory 101: You may have a natural ability to use colors well, but this course will teach you the theory behind why certain things look good and others not so much. [Planet Photoshop] [...]

RSS feed for comments on this post. TrackBack URI

Leave a comment

Name (required)

Mail (will not be published) (required)

Website