Color Theory For Designers, Part 2: Understanding Concepts And Terminology

Advertisement

If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The Meaning of Color1 of our color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.

Hue

Hue2 is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.

Examples

happytwitmas3
The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.

chapolito4
Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.

estilorama5
Pure red is a very popular hue in Web design.

mix6
Mix uses a number of pure hues in its header and logo.

steveottenad7
Green in its purer forms is seen less often and so stands out more than some other colors.

Chroma

Chroma8 refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.

In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.

Examples

moviestills9
Cyan has a high chroma and so really stands out against black and white.

canalconnection10
Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.

philippdoms11
Combining high and low saturation in the same hue can make for a sophisticated and elegant design.

fruehjahr12
Colors with very high chroma are best used in moderation, as done here.

panelfly13
Differences in chroma can make for a visually pleasing gradient.

Saturation

Saturation14 refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.

In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.

Examples

sifrvault15
The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.

rainbeaumars16
Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.

disfrutasanjuan17
Hues with lower saturation levels aren’t necessarily lighter, as shown here.

craftsale18
An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.

sunrisesoya19
Aother example of how low saturation colors make nearby high saturation colors really stand out.

Value

Value20 could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.

When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.

Examples

creativespark21
The high value of the yellow used here really stands out against the lower-value black and gray.

oysterdesign22
This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.

copimaj23
Combining colors with similar values makes for an energetic and lively background (which is enhanced by the design itself).

whoseview24
The red here has a lower value than the light blue, which itself has a lower value than the white.

colourpixel25
The human eye can pick up differences in value even among such similar hues.

Tones

Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.

Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.

Examples

lakesideheritage26
Tones can give websites a sophisticated look while adding some vintage and antique flair.

brightkite27
This website combines blues in a variety of tones, shades and tints.

mmuller28
Tones can be intensified by adding gray around them, as done here.

redvelvetart29
The tones used in the navigation and background design here give this website a vintage, hand-made feel.

mergeweb30
A great example of how a pure hue can really stand out against a background of tones.

metalab31
Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.

Shades

A shade32 is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.

In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.

Examples

jonathanmoore33
Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).

vuumedia34
Using different shades together works well, as long as sufficient contrast between them is maintained.

alilot35
An effective combination of shades and tints, particularly in the header.

skipvine36
Another background design that has shades (and a few tints) in a textured gradient.

stuffandnonsense37
Combining shades within textures adds interest to this website.

Tints

A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.

Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.

Examples

caiocardoso38
Caio Cardoso’s website has a variety of green tints in the background and in other elements.

fernandosilanes39
The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.

duboutdesyeux40
Blue tints are popular for sky and nature motifs.

smallwhitebear41
Tints are also popular in watercolor-based designs.

iamgarth42
Tints combined together make for a sophisticated gradient.

Conclusion

While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:

  • Hue is color (blue, green, red, etc.).
  • Chroma is the purity of a color (a high chroma has no added black, white or gray).
  • Saturation refers to how strong or weak a color is (high saturation being strong).
  • Value refers to how light or dark a color is (light having a high value).
  • Tones are created by adding gray to a color, making it duller than the original.
  • Shades are created by adding black to a color, making it darker than the original.
  • Tints are created by adding white to a color, making it lighter than the original.

Further Resources

The Whole Series

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
  2. 2 http://en.wikipedia.org/wiki/Hue
  3. 3 http://www.happytwitmas.co.uk/
  4. 4 http://chapolito.com/
  5. 5 http://estilorama.com/
  6. 6 http://www.visitmix.com/
  7. 7 http://www.steveottenad.com/
  8. 8 http://en.wikipedia.org/wiki/Chroma
  9. 9 http://www.annyas.com/screenshots/
  10. 10 http://www.canalconnection.com/
  11. 11 http://philippdoms.com/portfolio/
  12. 12 http://fruehjahr.ch/
  13. 13 http://panelfly.com/
  14. 14 http://en.wikipedia.org/wiki/Saturation_%28color_theory%29#Saturation
  15. 15 http://www.sifrvault.com/
  16. 16 http://www.rainbeaumars.com/
  17. 17 http://disfrutasanjuan.com.ar/
  18. 18 http://www.craft-sale.co.uk/
  19. 19 http://sunrise-soya.com/
  20. 20 http://en.wikipedia.org/wiki/Lightness_%28color%29
  21. 21 http://www.creativespark.co.uk/
  22. 22 http://www.oysterdesign.co.uk/
  23. 23 http://www.copimaj.ro/
  24. 24 http://www.whoseview.ie/index.html
  25. 25 http://www.colourpixel.com/
  26. 26 http://www.lakesideheritagesociety.org/
  27. 27 http://brightkite.com/
  28. 28 http://mmuller.com/blog/
  29. 29 https://www.redvelvetart.com/
  30. 30 http://www.mergeweb.com/
  31. 31 http://www.metalabdesign.com/
  32. 32 http://en.wikipedia.org/wiki/Tints_and_shades
  33. 33 http://jonathanmoore.com/
  34. 34 http://www.vuu.com.au/front/
  35. 35 http://alilot.co.il/
  36. 36 http://skipvine.ro/ro/
  37. 37 http://stuffandnonsense.co.uk/work/
  38. 38 http://www.caiocardoso.com/
  39. 39 http://www.fernandosilanes.com/
  40. 40 http://www.du-bout-des-yeux.com/
  41. 41 http://www.smallwhitebear.com/
  42. 42 http://iamgarth.com/
  43. 43 http://www.colorcube.com/articles/theory/glossary.htm
  44. 44 http://www.netmechanic.com/news/vol4/design_no13.htm
  45. 45 http://www.usask.ca/education/coursework/skaalid/theory/cgdt/color.htm
  46. 46 http://daphne.palomar.edu/design/color.html
  47. 47 http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
  48. 48 http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
  49. 49 http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

Advertising
  1. 1

    All 3 Articles were very helpfull.
    But my question is, can we use these colour scheme for Graphic designing (print media)? or theory is different for both? because i am graphic designer and i was searching for advertising field(print media).
    give me reply, i am waiting.

    0
  2. 52

    Really helpful and to the point article. Thanks!

    0
  3. 103

    thank you very much for describe me about color.

    0
  4. 154

    Can someone explain to me in more detail how the following pairs differ?

    Chroma/Saturation – Both deal with the intensity of a color
    Shade/Value – Both deal with the amount of black in a color
    Tint/Saturation – Both deal with the amount of white in a color

    1

↑ Back to top