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.
Quick Nav:
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, and Tertiary Colors
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
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.
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
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.
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).
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
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 inappropriateGreat post. Really enjoyed reading your blog posts. Thanks.
Flag as inappropriateThis 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 inappropriateNice 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 inappropriateReally well put together piece of work, nice one, thanks Owen :)
Flag as inappropriateYou are awesome Owen. Hope to see some more great posts by you :)
Flag as inappropriatethank a lot. i will improve my site
Flag as inappropriatewow this helped me a lot! thanks for sharing :)
Flag as inappropriateThank you so much! I’ve always wanted to learn about this!
Flag as inappropriateAwesome and beautiful website – helped alot .
Flag as inappropriateVery nice! Super informative!
Flag as inappropriateThanks for this post. Very informative for me.
Flag as inappropriateAlso some article about using colors in webdesign: http://www.cruzine.com/2010/06/25/designing-color-contrasting/
http://www.tutorial9.net/photoshop/design-a-clean-web-layout-with-the-960-grid/
Flag as inappropriateDownload60s.com is a graphic designing website. photoshop tutorials.
Flag as inappropriatehttp://download60s.com
Finally! A clear, understandable tut explaining colour theory. Thank you.
Flag as inappropriateGreat 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 inappropriateThanks for the color theory charts and facts. Interesting read.
Flag as inappropriateI really appreciate to your fascinating article!
Flag as inappropriateI 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 inappropriatelove this tutorial! easy way to understand the color theory! Thanks!
Flag as inappropriateReally helpful, thanks!
Flag as inappropriateVery good tutorial…
Flag as inappropriateI recently discovered a great website about this:
Flag as inappropriatehttp://www.colorschemedesigner.com/
Great article, I learnt a lot I didn’t know. Thanks for putting together. Ted
Flag as inappropriateTo 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 inappropriateMike was on a roll. Good to have some folks in the community willing to help others out :) Great questions too!
Flag as inappropriateGood article, well recommended.
Many thanks for sharing.
Flag as inappropriateAwesome tutorial! Clear and straight to the point. Always a pleasure to read. Thanks!
Flag as inappropriateK 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 inappropriate100% CMY ends up being approximately “doodoo brown” or lighter on most printers. Theory goes that 100% CMY should be black, but… sadly, it doesn’t! But if it did, think of how much less range you would have in light colors!
Flag as inappropriateGreat article! That was probably the easiest to understand article on the color wheels, hue, saturation and brightness that I’ve ever read.
Flag as inappropriateWhen we use greys, whites and blacks for contrast, (in typography for example, how does that affect color combination? Can anyone explain?
Flag as inappropriateAwesome 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 inappropriateVery cool tutorial that summarizes everything that I studied in visual programming for almost a month.
Flag as inappropriateVery good.
This is an amazing article. I really learned a lot about colors from this.
Flag as inappropriateInformative 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 inappropriateHey 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 inappropriateMike, 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 inappropriateThank 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 inappropriateWell said, mate. Great explanations.
Flag as inappropriateGreat article, right on the money. Amazed at the amount of clear information supplied in such a short post – congratulations!
Flag as inappropriateGreat!! a simple way to explain the concept of color theroy.
Flag as inappropriatenice 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 inappropriateVery helpful insight on color. great and simply article, which is really good. thanks for it.
Flag as inappropriateNice post, really simplifies the perspectif on color picking.
Flag as inappropriateI 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 inappropriateVery well done ! Thanks for this !
Flag as inappropriateCan 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 inappropriateThe basic, simple and straight forward. Good article!
Flag as inappropriateClear & Crisp Points have been covered. Thanks for the post.
Flag as inappropriateFantastic Article!
Flag as inappropriateHi 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 inappropriateOne 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 inappropriateAmazing tut’ man. You helped me alot.
Flag as inappropriateThat color wheel keeps on rolling rolling. Fantastic article and instruction!
Flag as inappropriateI love this lesson. Thanx!
Flag as inappropriateExcellente, thanks for sharing
Flag as inappropriateGreate, very well explained.
Flag as inappropriateThanks.
Great tutorial. Very helpful!
Flag as inappropriategreat and well illustrated. favorited for sure.
Flag as inappropriateUna muy buena ilustración de la teoría.
Flag as inappropriateThank 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 inappropriatenice article.
it is always good to get better at understanding color.
Flag as inappropriateAmen brotha, amen.
Flag as inappropriateThis was great, you laid it out really simply, and it was lovely to read :)
Flag as inappropriate