Sign In  |  Join Now Become a member to add links and start earning points!

Simple, Practical Color Theory

The mastery of color theory, relations and harmonies is one of the primary steps to uncovering the full beauty and potential of your images (in the realms of art, design and/or photography). Find out more in this simple, practical, colorful guide.

Image Description

Color Models

Depending on your background and your purpose, you will view primary colors differently. There are three generally accepted models: RGB (red, green, blue), CMY (cyan, magenta, and yellow), and RYB (red, blue, yellow).

Primary color models can be divided into two categories: additive and subtractive.

The additive primary colors are obtained by light: red, green and blue (RGB). When combined, these colors create white. Scientists in the late 19th century established that color perception is best described in terms of the primary additive colors RGB because it is based on the human perception of colors.

The subtractive primary colors are obtained by the subtraction of light: cyan, magenta, and yellow (CMY). They form the basis of printing colors and combine to form black, the K in CMYK. The second set of subtractive primary colors is: red, yellow and blue (RYB). This model is primarily used in art and design education, particularly painting. According to Johannes Itten, a Swiss color and art theorist, the primary use of this color wheel is for mixing pigments.

Color Model Application:

RGB: Photography, video/film and design.

CMYK: Print design.

RYB: Art, painting and design.

RGB and RYB Confused?

In regards to design, the purpose of the color wheel is to aid the creation of visually harmonious color schemes not to confuse you. I would recommend using the RGB model because it reflects human color perception correctly. Of course, you can experiment with both types of the color wheel.

Now that we’ve covered the various color models and their uses, we can proceed with confidence. We will be using the RGB color model.

RGB Color Model

Primary, Secondary, Tertiary Color Wheels

Primary, Secondary, and Tertiary Colors

Image Description

In the RGB (additive) color model, the Primary colors are: red, green, blue.

The Secondary colors: cyan, magenta and yellow, are formed by the sum of two primary colors of equal intensity.

Lastly we have (six) Tertiary colors, which are comprised of mixing half primary color and half secondary color: orange, yellow-green (lime), cyan-green, cyan-blue, blue-magenta (purple), red-magenta (pink).

The additive and subtractive sets of tertiary colors RGB and CMY are exactly the same, just on different points of the wheel.

“The color wheel not only helps understand the relationship of different colors but also the classification of colors. It also provides a quick reference to the primary, secondary and tertiary hues.” – Mark Boulton

Color Harmonies

Image Description

Monochromatic

Monochrome selections are simply one color from the color wheel.

Complementary

Complementary color schemes use colors that are opposite each other on the color wheel.

Split-complementary

The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses two colors adjacent to its complement.

Analogous

Analogous color schemes use colors that are next to each other on the color wheel. Analogous schemes are often found in nature and are harmonious and pleasing to the eye.

Accented Analogic

Accented analogic color schemes are combinations of analogous and complementary color schemes. In addition to colors that are adjacent to each other, it uses a complementary accent at its opposite.

Triad

A triadic color scheme uses colors that are evenly spaced around the color wheel.

Tetrad (double complementary)

The tetradic or double complementary color scheme uses four colors arranged into two complementary pairs.

Square

The square color scheme is similar to the tetradic, but with all four colors evenly spaced around the color wheel.

Image Description

Warm and Cool Colors

The color wheel can be divided into warm and cool colors. Warm colors are vivid and energetic, and tend to advance in space. Cool colors give an impression of calm, and create a soothing impression. White, black and grey are considered to be neutral.

Term Definitions

Let’s take a look at the meanings of a few color-related words. These words can often confuse and be erroneously substituted for one another. This following list of definitions will help us proceed unambiguously. All definitions are taken, of course, from The Merriam-Webster Dictionary.

Hue

The attribute of colors that permits them to be classed as red, yellow, green, blue, or any intermediate between any contiguous pair of these colors.

Saturation

A chromatic purity; freedom from dilution with white.

Brightness

The attribute of light-source colors by which emitted light is ordered continuously from light to dark in correlation with its intensity.

Tint

A variation of color produced by adding white to it and characterized by low saturation with relatively high lightness.

Tone

The color quality or value; a tint or shade of color; the color that appreciably modifies a hue or white or black.

Shade

A color produced by a pigment or dye mixture having some black in it.

Chroma

A quality of color combining hue and saturation.

Hue, Saturation and Brightness

Image Description

Hue

In practical terms, hue refers to a specific tone of color. It is not another name for color as color can have saturation and brightness as well. For instance, colors with the same hue are distinguished with adjectives referring to their lightness and/or chroma, such as with “light green” or “pastel blue”.

Saturation

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.

Brightness

Brightness refers to how much white or black is contained within a color.

Saturation and Brightness

The image below (left) of Photoshop’s Color Picker shows the saturation and brightness of the cyan hue. The saturation is increased by dragging the picker horizontally towards the right of the box and decreased towards the left. Brightness is increased by dragging vertically towards the top of the box and decreased towards the bottom. The hundred percent mark of a hue’s saturation and brightness is the upper-right corner.

Examples for hue, saturation, and brightness are best shown in the hue/saturation adjustment layer. Each of the three is affected separately and the display sliders intuitively show the principles referenced above. See the example below (right).

Saturation and Brightness

Conclusion

Cognizance of colors and/or combinations that are pleasing, and savvy use of post-production tools are just two of the ways that comprehension of color theory, relations and harmonies is useful to us. We have already put this knowledge to use to improve and stylize images in How to Use Curves in Photoshop and Color Correction Basics in Photoshop.

We will continue to use color theory insofar as every photograph can be improved with the post-production tools within Photoshop, Lightroom, or other image-editing software. Specifically, a few adjustment tools where color theory knowledge helps include: Curves, Hue/Saturation, Color Balance, Channel Mixer, Selective Color—and the list goes on. The mastery of color theory, relations and harmonies is one of the primary steps to uncovering the full beauty and potential of your images.

90 Comments

  1. Add point Subtract point

    Really useful. We’re working on some technology for our stock photography site that looks at colours. (www.pixmac.com) so I’ve just sent this to my developers.

    Flag as inappropriate
  2. Add point Subtract point
    ของขวัญ (1 Point) January 14, 2011 at 11:31 am

    Great post. Really enjoyed reading your blog posts. Thanks.

    Flag as inappropriate
  3. Add point Subtract point

    This is a really great tutorial. There is a lot of detail here but I think well worth learning in-depth. I really need to read over this one!

    Flag as inappropriate
  4. Add point Subtract point

    Nice piece of work! Since I’am very lazy character ( :-)) ) I searched the internet and came up with a very nice website working with the principal described above. The link is http://colorschemedesigner.com/

    Have a look and create some awesome coloursschemes for your sites ;-))

    Seeya Arkomat

    Flag as inappropriate
  5. Add point Subtract point

    Really well put together piece of work, nice one, thanks Owen :)

    Flag as inappropriate
  6. Add point Subtract point

    You are awesome Owen. Hope to see some more great posts by you :)

    Flag as inappropriate
  7. Add point Subtract point

    thank a lot. i will improve my site

    Flag as inappropriate
  8. Add point Subtract point
    jinxykitty (0 Points) August 24, 2010 at 6:38 pm

    wow this helped me a lot! thanks for sharing :)

    Flag as inappropriate
  9. Add point Subtract point
    Charles L. (1 Point) August 5, 2010 at 4:08 am

    Thank you so much! I’ve always wanted to learn about this!

    Flag as inappropriate
  10. Add point Subtract point
    Sherazaad -South Africa (1 Point) July 17, 2010 at 12:45 pm

    Awesome and beautiful website – helped alot .

    Flag as inappropriate
  11. Add point Subtract point
    Gerrit (2 Points) July 12, 2010 at 11:53 am

    Very nice! Super informative!

    Flag as inappropriate
  12. Add point Subtract point
    oliver (1 Point) June 29, 2010 at 4:03 pm

    Thanks for this post. Very informative for me.
    Also some article about using colors in webdesign: http://www.cruzine.com/2010/06/25/designing-color-contrasting/

    Flag as inappropriate
  13. Add point Subtract point
    Gebel Scarduzio (1 Point) June 19, 2010 at 5:18 pm

    Download60s.com is a graphic designing website. photoshop tutorials.
    http://download60s.com

    Flag as inappropriate
  14. Add point Subtract point
    Claire (1 Point) June 12, 2010 at 11:48 am

    Finally! A clear, understandable tut explaining colour theory. Thank you.

    Flag as inappropriate
  15. Add point Subtract point

    Great tut! Made everything clear to me

    PS: Can you kindly make the color wheels original file (.PSD, .AI or anything) available for download? Please?!

    Flag as inappropriate
  16. Add point Subtract point
    Axelrod (1 Point) June 4, 2010 at 1:59 pm

    Thanks for the color theory charts and facts. Interesting read.

    Flag as inappropriate
  17. Add point Subtract point
    杜罗华 (1 Point) May 29, 2010 at 11:40 am

    I really appreciate to your fascinating article!

    Flag as inappropriate
  18. Add point Subtract point
    Jacob (1 Point) May 25, 2010 at 10:28 am

    I am taking color theory now and I found this post very beneficial. Bookmarked, saved to hard drive, thumb drive, and printed out. Thanks!!

    Flag as inappropriate
  19. Add point Subtract point
    MundoCaco (1 Point) May 24, 2010 at 4:51 am

    love this tutorial! easy way to understand the color theory! Thanks!

    Flag as inappropriate
  20. Add point Subtract point

    I recently discovered a great website about this:
    http://www.colorschemedesigner.com/

    Flag as inappropriate
  21. Add point Subtract point
    Ted Thompson (0 Points) May 17, 2010 at 6:36 am

    Great article, I learnt a lot I didn’t know. Thanks for putting together. Ted

    Flag as inappropriate
  22. Add point Subtract point
    Hector Hurtado (1 Point) May 16, 2010 at 3:16 pm

    To Mike D.,

    Thank you very much for taking the time to answer extensively to my question as well as others. I truly learned something from your additional input.

    Take care.

    Flag as inappropriate
  23. Add point Subtract point
    Cash Loan Bournemouth (1 Point) May 16, 2010 at 2:48 pm

    Good article, well recommended.

    Many thanks for sharing.

    Flag as inappropriate
  24. Add point Subtract point

    Awesome tutorial! Clear and straight to the point. Always a pleasure to read. Thanks!

    Flag as inappropriate
  25. Add point Subtract point
    Norbert (1 Point) May 16, 2010 at 6:22 am

    K is in CMYK not because C+M+Y = blacK, but because printers add an extra blacK ink. It saves money and gives better result (stronger black), then creating black by mixing C ink, M ink and Y ink.

    Flag as inappropriate
  26. Add point Subtract point
    Jeff (1 Point) May 16, 2010 at 2:30 am

    Great article! That was probably the easiest to understand article on the color wheels, hue, saturation and brightness that I’ve ever read.

    Flag as inappropriate
  27. Add point Subtract point

    When we use greys, whites and blacks for contrast, (in typography for example, how does that affect color combination? Can anyone explain?

    Flag as inappropriate
    • Add point Subtract point
      Mike D. (1 Point) May 16, 2010 at 12:13 pm

      Awesome question, I had the same question for the longest time… HSL is the best slider set for visual contrast work.

      When the eye sees contrast, the biggest thing you’re seeing is a contrast of saturation. Some colors do not contrast well just due to their nature, but the S slider is going to be your key to good visual contrast. As long as your gray’s saturation is significantly different (20% delta (change) or greater) than your background color, you should be OK for contrast.

      Grays, white and black don’t fit neatly into the color wheel, but you can experiment by drawing boxes of different colors, say, 3 reds, a dark red down to a light red, almost pink. Put 3 lines of text in each box, one black, one 50% black, and one white (you can add more lines if you want more testing, natch) and let your eyes tell you what works and what doesn’t.

      Flag as inappropriate
  28. Add point Subtract point
    Leandro (1 Point) May 15, 2010 at 3:44 pm

    Very cool tutorial that summarizes everything that I studied in visual programming for almost a month.
    Very good.

    Flag as inappropriate
  29. Add point Subtract point
    Kevin Rajaram (0 Points) May 15, 2010 at 3:16 pm

    This is an amazing article. I really learned a lot about colors from this.

    Flag as inappropriate
  30. Add point Subtract point
    Hector Hurtado (0 Points) May 15, 2010 at 2:13 pm

    Informative and refreshing article. Yet, I am left up with one doubt that no one has been able to clarify – perhaps you guys?

    Coming from an artistic background, the first wheel I met was the RYB. It seemed very intuitive because you can verify its effect with simple colored pencils, crayons, etc.

    Later, I met the RGB. It made sense on the screen, but invalidated the complementaries I grew accustomed to as a student.

    You write “I would recommend using the RGB model because it reflects human color perception correctly.” How so? Can anyone expand on this statement?

    Flag as inappropriate
    • Add point Subtract point
      Mike D. (2 Points) May 16, 2010 at 12:07 pm

      Hey Hector,

      I work with this stuff daily, so I completely understand where your confusion sources – the two primary color models (additive v. subtractive) are the lens through which that statement is made. RGB is a pure additive color model, where CMYK is an imperfect subtractive color model (in theory, 100% CMY = black, in practice, not so much – we don’t have good enough colorants to make that happen and so need black ink to help).

      RYB (I hear it called BRYG, blue red yellow gray sometimes too) is a subtractive color model like CMYK, so comparison to RGB is inapropos at best and fatally flawed at worst. RYB has an even smaller possible gamut of colors than CMYK because of the hues it is starting with (the red and the blue especially are the limiters). Pinks and purples especially in RYB can’t have the same kind of vibrancy and saturation values that a CMYK purple can have (compare 100% RB in RYB vs. 100% CM in CMYK).

      Additive vs. subtractive color is royalty among color principles, but is very hard to actually wrap your head around. An analogy may help:

      Subtractive color happens when: coloring on paper with magic markers. When you cross lines of differing colors, the resulting color is darker, meaning that full saturation of all colors leads to black.

      Additive color happens when: shining lights of different colors onto the same location. When the lights overlap, the resulting color is lighter, meaning that full saturation of all colors leads to white.

      They’re fundamentally different models of color, and that is why it is very important to design for each appropriately. YMMV (your mileage may vary) when converting from one to the other, though the engines used for converting RGB to CMYK have improved drastically over the last 5 years. It is uncommon to need to convert CMYK to RGB, but because of the big difference in size of gamut (RGB is far bigger than CMYK) CMYK images may look muddy when converted naturally, or weirdly oversaturated in some areas if the designer attempts to “fix” the color.

      For a great illustration of the limits of CMYK, look at a color photo from a newspaper next to a good print of it, or even the same photo on-screen.

      Flag as inappropriate
    • Add point Subtract point

      Mike, this was a wonderful explanation. Thanks so much for the insight and detail. I might add this into the article for others to see :)

      Flag as inappropriate
    • Add point Subtract point
      Mike D. (0 Points) May 17, 2010 at 1:20 am

      Thank you, I’m glad it appears useful; I deal with digital color printing in a quick printshop (Xerox DocuColor 5000 with Creo CXP50 RIP) and have many different levels of explaining color to people :)

      Complaint #1 by many orders of magnitude: “it looks better on my screen!” or “this isn’t the color i picked out on my monitor!”, thus segueing nicely into the RGB/CMYK discussion :/

      Any small printshop with some chops can color match pretty well to a provided sample; don’t be afraid to ask for better. From a business standpoint, they want to sell you what their machine is doing right now, not invest the extra time in calibration and maintenance for the 3% of clients who will actually notice. Just a tip for any print-oriented folk out there :) and if your printer says no-go on color matching, be reasonable in expectations, but if they won’t budge, shop around. Web-to-print vendors generally don’t color-match, but the scale of their operations are such that a single person has zero leverage with the vendor leaving the client no room to negotiate. All designers should have a local printer anyway.

      Flag as inappropriate
    • Add point Subtract point
      James (2 Points) May 20, 2010 at 4:28 pm

      Well said, mate. Great explanations.

      Flag as inappropriate
  31. Add point Subtract point
    Bradley (1 Point) May 15, 2010 at 1:40 pm

    Great article, right on the money. Amazed at the amount of clear information supplied in such a short post – congratulations!

    Flag as inappropriate
  32. Add point Subtract point
    Nikunj (1 Point) May 15, 2010 at 1:13 pm

    Great!! a simple way to explain the concept of color theroy.

    Flag as inappropriate
  33. Add point Subtract point

    nice post, and helpful, but why is the banner graphic at the top “simple, practical color theory” Pink and Blue when half of the article is about colour harmonies? xD seems ironically contradicting or its just me :P but regardless insightful post :)

    Flag as inappropriate
  34. Add point Subtract point
    Jonathas Scott (1 Point) May 14, 2010 at 12:49 pm

    Very helpful insight on color. great and simply article, which is really good. thanks for it.

    Flag as inappropriate
  35. Add point Subtract point
    Simon (1 Point) May 14, 2010 at 9:41 am

    Nice post, really simplifies the perspectif on color picking.

    Flag as inappropriate
  36. Add point Subtract point
    Damian Smith (1 Point) May 14, 2010 at 6:13 am

    I don’t think I have ever read that far into colour before. Really explained a lot.

    I didn’t even realise the photoshop colour picker related to all of that, I guess when I think about it it makes sense but I just go in, select a colour I like and apply it!

    I use colour wheels a fair bit to make sure I have a good solid colour base to my site design. There are some really fantastic resources out there to help with colour schemes and complimentary colours.

    As for RYB, I must say I have never used it, considering I use photoshop and there is no setting for this I probably never will. Would be interesting to know if there is anyone that does actually use it on a regular basis?

    Thanks for the great read anyway!

    Flag as inappropriate
  37. Add point Subtract point
    stetro (1 Point) May 14, 2010 at 2:46 am

    Very well done ! Thanks for this !

    Flag as inappropriate
  38. Add point Subtract point
    Mike Dohrn (1 Point) May 13, 2010 at 3:37 pm

    Can you put this up somewhere in PDF format, or email it to me? I’d love to use it as an explanatory resource at the Alphagraphics where I work.

    Would pay $10 for the PDF; feel free to email me!

    Flag as inappropriate
  39. Add point Subtract point
    Lars (1 Point) May 13, 2010 at 9:59 am

    The basic, simple and straight forward. Good article!

    Flag as inappropriate
  40. Add point Subtract point

    Clear & Crisp Points have been covered. Thanks for the post.

    Flag as inappropriate
  41. Add point Subtract point
    Hitesh Mehta (1 Point) May 13, 2010 at 6:44 am

    Fantastic Article!

    Flag as inappropriate
  42. Add point Subtract point
    George Hammerstein (1 Point) May 12, 2010 at 11:20 pm

    Hi maybe we could take a step backwards from your comment on Johannes Itten. Itten is valid but from a colour theory perspective Chevreul is the source that Itten used.
    Take care

    ghammers

    Flag as inappropriate
  43. Add point Subtract point
    Karen (1 Point) May 12, 2010 at 8:33 pm

    One small quibble: The three color bars in the section describing Saturation and Brightness are all examples of Saturation.

    I realize it is helpful to break it down into Saturation and (what I teach as) Value Scale in order to sell it to the computer-based practitioners. But, since saturation is a function of the purity of color, the more of any other color or neutral value (black, grey, white or any color) you add, the less saturated the original color becomes.

    That actually simplifies your lesson even more: A change in Saturation is the modification of the purity of the original color through the use of another color or through a change in Value (Brightness).

    Value can (and should) be sectioned out. But that’s another discussion.

    Flag as inappropriate
  44. Add point Subtract point
    Linus (1 Point) May 12, 2010 at 3:27 pm

    Amazing tut’ man. You helped me alot.

    Flag as inappropriate
  45. Add point Subtract point
    Scott Corgan (1 Point) May 12, 2010 at 3:20 pm

    That color wheel keeps on rolling rolling. Fantastic article and instruction!

    Flag as inappropriate
  46. Add point Subtract point
    Dimitris S. (1 Point) May 12, 2010 at 3:08 pm

    I love this lesson. Thanx!

    Flag as inappropriate
  47. Add point Subtract point
    Ana María (1 Point) May 12, 2010 at 2:56 pm

    Excellente, thanks for sharing

    Flag as inappropriate
  48. Add point Subtract point
    Hitesh Chavda (0 Points) May 12, 2010 at 12:32 pm

    Greate, very well explained.
    Thanks.

    Flag as inappropriate
  49. Add point Subtract point
    gruporastris (1 Point) May 12, 2010 at 12:28 pm

    Great tutorial. Very helpful!

    Flag as inappropriate
  50. Add point Subtract point
    @trudesign (1 Point) May 12, 2010 at 11:20 am

    great and well illustrated. favorited for sure.

    Flag as inappropriate
  51. Add point Subtract point
    Fernando de Sá (1 Point) May 12, 2010 at 9:49 am

    Una muy buena ilustración de la teoría.

    Flag as inappropriate
  52. Add point Subtract point
    Tony Dunsworth (1 Point) May 12, 2010 at 9:49 am

    Thank you. Great article and from a programmer who has to cross into design with colour and such; this was fantastic to help me get better with it.

    Flag as inappropriate
  53. Add point Subtract point
    mikeo (1 Point) May 12, 2010 at 9:20 am

    nice article.

    it is always good to get better at understanding color.

    Flag as inappropriate
  54. Add point Subtract point
    Johnny (1 Point) May 12, 2010 at 9:04 am

    This was great, you laid it out really simply, and it was lovely to read :)

    Flag as inappropriate