Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

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

If you’re going to use color effectively in your designs, you’ll need to know a few color concepts, as well as color theory terminology. A thorough working knowledge of concepts like chroma, value, and saturation is key to creating your own awesome color palettes (which we’ll get to in Part 31). [Content Update: August 2017]

In Part 1: The Meaning of Color2 of this 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).

How To Create Your Own Color Schemes

Let’s talk about creating your own color schemes, from scratch, covering the traditional color scheme patterns (monochrome, analogous, complementary, etc.), and others. Read more →3

Hue Link

Hue4 is the most basic of color terms and 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 series for the meanings conveyed by various hues.

Examples Link

Small Victories5
Using a lot of pure hues together can add a fun and playful look to a design, as done in the design of this website.
Franky Rizzardo6
Pure red is a very popular hue in Web design. This site also incorporates other pure hues as the main photo changes.
Head Offfice7
HeadOfffice uses such a bright pure yellow hue that it’s almost difficult to look at.

Chroma Link

Chroma8 refers to the purity of a color. A hue with high chroma has no black, white, or gray added to it. Conversely, 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 similar (but not identical) chroma. Opt instead for hues with chromas that are either exactly the same or at least a few steps away from each other.

Examples Link

Combining a variety of hues with the same chroma creates a harmonious background pattern.
The difference in chroma between the pink and dark purple on this site provides solid contrast in the design.
Mr Marcel School11
The low chroma colors in this design contrast nicely against the black typography.

Saturation Link

Saturation12 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 Link

Nuage App13
The slightly paler saturation of the letters in the header on this site create a more calming feel than pure hues would.
The more saturated red accent color on this site really stands out against the black and tan colors, which are both less saturated.
Name Of Love15
Warm, less saturated hues like the ones found on this site give a decidedly feminine feel to the design.

Value Link

Value16 could also be called “lightness.” It refers to how light or dark a color is. Lighter 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 Link

The high value of the yellow used here really stands out against the lower-value black and even higher value white.
Here’s another site that combines a mid-range hue with a high-value and low-value hue to create a very modern look and feel.
The Waaark site combines hues with a variety of values to create a very harmonious design.

Tones Link

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. More gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.

Examples Link

Line Motion20
Purple takes on a twilight quality when gray is added.
This website combines blues in a variety of tones, shades and tints.
Flock Knitwear22
Pink becomes dusty rose as a tone.

Shades Link

A shade23 is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but technically 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 or lighter neutrals is best to avoid too dark and heavy a look.

Examples Link

Joni Korpi24
Joni Korpi’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).
Shades of blue and yellow combine to create a nautical-themed design.
Revolution Messaging26
Navy blue and dark red are commonly used shades in political designs.

Tints Link

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 technically a tint, even if the color is still quite bright.

Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine, though there are plenty of instances of other pastel sites with a more masculine or gender-neutral look. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.

Examples Link

Nurture Digital27
Here’s an example of a tint that’s still quite bright and vibrant.
The light blue tint combined with the more subtle yellow tint on the Timedropper plugin website creates a soft and fun look.
Make My Lemonade29
Pink is a tint of red, and the two different versions of it here work beautifully together.

Conclusion Link

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 Link

The Whole Series Link

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37

↑ 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.

  1. 1

    Great article! Love this one more then part 1 to be honest :-).

    Will there be a part three? if yes, may I suggest the theory of contrasts and its effects? I think that’s one big aspect which makes a design work or not.

    Looking forward to more theory =)

  2. 2

    I was waiting for the Part 2..
    thanx a lot….

    Great collection of websites…
    now i redesign my websites…:)

  3. 3

    Thank you very much for sharing your knowledge, both parts are great.
    I’m learning a lot with your blog and from the websites you put as examples.
    Keep posting ;)

  4. 4


    Part 1 was more common place on the web (and as some commented could actually make designers lives a bit more difficult when used as reference by clients), this one though takes it to the next level and show a clear understanding of all the factors involved :)

  5. 5

    @Adit: No matter how you decide upon a color scheme, knowing color theory will help you understand why you “feel” a certain way about a particular design. Thus, it gives you the power of understanding what’s really behind the perceptions some may find innate or organic. With that understanding comes the ability to adjust your color scheme accordingly to achieve a particular result.

    Just the way I see it!

    • 6

      Digressing from the graphics,

      I studied music composition for several years before moving into graphics. Similar deal, you study the works of Bach, Chopin, Beethoven and you learn the “rules” of composition. These rules came AFTER these works only from people studying the music to formalize the process. After you learn these rules you then proceed to break most of them but like above, it’s about the language you speak, and these rules to get the composition finished. Aside from that, the musical ornaments help to really shape the piece.
      As with anything, it’s the theory AND the practice that make a truly amazing work in any discipline.

      Good article in the end though!

  6. 7

    Wow! Thanks a lot! I didn’t know about some of the terminology, shades, tints, tones. Now I know the difference. Thanks again!

  7. 8

    Excellent post, great web examples too. Good to know the specific terminology – now to teach that to students!

  8. 9

    like some of the examples… but most got a terrible fold…

  9. 10

    nice one

  10. 11

    Cameron you’re awesome!

    Thanks for the article. learn a lot : )


  11. 12

    Excellent article, and great examples. I also love some of the comments and suggestions counterbalancing the article.

  12. 13

    Thank you very much for featuring us. Made my day! :-D

  13. 14

    Thanks, thanks and thanks.

  14. 15

    First! Thanks for this summary!

  15. 16

    Faizan Qureshi

    February 2, 2010 6:30 am

    Wonderful recap on terms we often neglect to use.

    Cheers. :)

    • 17

      Actually, I usually start thinking about interesting details first, and then step back to envision a larger design that will incorporate those details. I agree that many people may start from a big picture and move to the details, but I think it’s just a matter of personal methods, rather than the way the human brain is wired.

  16. 18

    Although I have studied color theory, I still have doubts regarding it’s practicality. You said that one must be familiar with these concepts in order to develop an effective color scheme. This essentially means that the final color would be decided after tweaking with the elements which define a color, that is, hue, saturation,value etc. In other words, color theory follows an inside out approach to develop a color. However, this approach is in direct contradiction with the way in which human brain perceives information. Human brain, unlike a computer program, first visualizes the bigger picture and then gets into the details. For example, when designing a website, we already have a picture in our mind. We then use tools like Adobe Kuler to develop a color scheme which is related to the picture we envisioned. A person can easily develop a suitable color scheme without getting into the details of all the elements that define a color. This approach is exactly opposite to the inside out approach. Hence, color theory would be beneficial for a computer designing a website because a computer needs every bit of information to build the bigger picture. Humans have an organic approach when deciding on colors.
    Still, this series is indeed useful to know more about colors. Nice read! :)

    • 19

      Satish Gandham

      February 10, 2010 6:53 am

      I agree with you, practically it’s not possible for humans to take these principles into consideration while selecting colour scheme. However they can be used to tweak the colours once we have the basic website ready.

      Good read.

    • 20

      Stuart Rutter

      May 30, 2012 8:19 am

      There is also the question of Accessibility and colour blindness. I have just recently completed work on a site that supported a high-contrast view. This is a very imported aspect of colour selection. When trying to translate an original design into and accessible high-contrast version the original site design will be lost.

  17. 21

    @Adit personnally I’m very very bad at choosing colors (I’m a programmer who likes to design) and I hope to get some clue in color selection for a webapp, the basics at least.

  18. 23

    Great article, this one point was the only thing I’d like clarified:

    Anyone want to take a stab at explaining the difference between chroma and saturation, in a nutshell?

    • 24

      Mr. Chromatic

      February 4, 2010 7:44 pm

      they’re the same, but in different mediums. Saturation traditionally was derived from pigment – how much color is in the ink or paint, and chroma from light emitting media (video). Ultimately they measure the same thing: the intensity of the hue component of the color.

  19. 25

    Great article. Color is a complex thing.

    To get your head around it, I recommend only worrying about the 3 main properties that make up a color: Hue, Saturation, and Value. When you learn how each of these work, concerning yourself with ‘tints’ and ‘tones’ and whatnot start to become redundant – and looking back when I started to learn color, I wish those terms weren’t taught to me – it only complicated things.

    As an example, and as the article shows, there’s a lot of overlap. Some of the sites shown in saturation or chroma sections could also fly in the other sections.

    • 26

      Yeah you’re right. I’m new to everything that is color, but like you said, I noticed the redundancy in the examples in value and tone, shade and tint. Also with saturation and chroma examples. I have this feeling that you just really need to trust your eyes, and with a knowledge of the theory.

  20. 27

    Colour Theory is something which every designer should be aware of. With out the basic knowledge of Colour Theory one cannot call him/herself a complete designer. Its interesting to know about colours and how humans relate to them in different parts of the world. Cameron your articles are just awesome. I’m waiting for Part 3. Cheers! Kris

  21. 28

    First article was better. Knowing terms won’t make you match colors more effectively. Besides the large selection of good websites, part 2 was fairly useless.

    • 29

      I somehow agree (somehow being because I’m new to color and not really sure about my statement, but..) because application and personal experience would still help a lot better than theory would. Theory just helps to explain things why they are the way they are. It’s an after the fact thing. It’s like which came first, the chicken or the egg. LOL.

      But of course, theory can help you as well up to a certain point, bec of the fact that it explains how things work.

  22. 30

    Great ;D

  23. 31

    Great post!! Very helpfull, thank you!!

  24. 32

    Edison A. Leon

    February 2, 2010 11:54 am

    Thank you so much Cameron bring the next one, I’m trying to get into design, since I’m just developer, and this is the best design intro course ever.

  25. 33

    Jonathan Moore

    February 2, 2010 12:00 pm

    Thanks for featuring my site –! There’s a lot of other great examples there.

  26. 34

    I thought saturation was the definition you gave for chroma never heard of chroma before, not even in books about color theory.

  27. 35

    Some great examples here. I’ll try to remember these tips.

    (adds to Evernote)

  28. 36

    Great article!

  29. 37


  30. 38

    Interactive Agency Copimaj Interactive

    February 3, 2010 4:22 am

    Thanks for including Copimaj Interactive among this collection of websites that used color effectively in their designs. We are honored for this mention that encourages our interactive agency to make better and better designs with every project.

  31. 39

    its fantastic

  32. 40

    Really Good Article and learn more on today

  33. 41

    Great Post! Very useful. Thanks.

  34. 42

    Joshua Briley

    February 3, 2010 4:16 am

    Thanks again for a great article. I’d be interested in reading how you accomplish these techniques.

  35. 43

    Another great article. This series is fantastic, really hitting on some potentially overlooked techniques… Its so much easier to see the difference between tone, hue and tint effects when they are grouped together like that.

    Cheers Cameron

  36. 44

    Bundle of thanks for sharing this extra ordinary helpful infromation for all designers who they are going to start their future. We are also waiting for third one.

  37. 45

    Benschi Aadalen

    February 3, 2010 8:00 am

    i love the colors!

  38. 46

    I’m thoroughly enjoying seeing color theory promoted so ably. Since we all seem to be color enthusiasts here, I thought I’d share one of my favorite color guidelines, from Marc Chagall:

    All colors are the friends of their neighbors and the lovers of their opposites.

  39. 47

    Really useful article!

  40. 48

    Thank you for these colour theory articles, and I am really looking forward to part three. I’ve always had a bit of trouble understanding the ways colours interact and the reasons behind why, but this has really cleared quite a few things up.

  41. 49

    Thank you SM.
    You rock. Awesome post.

  42. 50

    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.

    This is confusing to me. The whole article is confusing. I read in the article that color is important and any variations in some aspects would be a bad thing. Then in the examples there are exactly what was bad things that looked good.

    For the most part I liked the article and I just did not pay attention to the rules of composition since I do not follow rules anyway…

    • 51

      Michael Lessing

      April 19, 2011 7:51 pm

      After reading this post, I feel like I need to know more about color theory, or that I’d be happy knowing less. :-) I’ve taken Art class in high school, and Art Appreciation courses in college that introduced me to the basics of color theory, but the talk of chromas and hues seems a little extreme. I design websites and have used color scheme tools like Adobe Kuler, ColorSchemer, or more recently Color Scheme Generator ( Am I in the minority if I choose to use tools like these that help me get my work done more quickly, as opposed to toiling over a color wheel and handpicking colors based on seemingly esoteric aspects of color theory?

  43. 53

    Aravind Jose T

    February 9, 2010 10:41 am

    Was keeping the series on hold and today, I’m on a marathon. Finished 1st, now read this one, and moving onto the 3rd one.

    Such a neat and Wonderful article.
    Honestly, didn’t knew what Tones/Shades/Tints technically meant.

    Thank you so much.

  44. 54

    This series of articles is weak at best, only skimming the surface and causes confusion. For example, under “chroma” it’s stated “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.” which, to me, sounds contradictory.

    Since this is aimed at web designers, talking about adding black to colors without indicating how that is done in a browser only makes it mysterious and confusing. Throw in tints, shades, lightness, chroma and saturation without stating how to do such a thing using RGB on a web page and you’ve lost us. Aren’t some of these terms more related to paint than light?

  45. 55

    this is really nice articles for any web designer or learners.

  46. 56

    Here’s one really nice interactive color guide to see the difference color can create :
    Helps overcome any initial jitters one has about understanding color and how to use it.

  47. 57

    Yachika Verma

    May 13, 2010 11:08 am

    Great Collection….I have got so many color schemes from your collection to use on my sites. Thanks a lot…!!

  48. 59

    Very nice article…I have one question.

    What is that method called where colour or font style is used to break one word into two…
    for example…
    if the word “Example” is written… then the words ‘AMPLE’ within it, will be written in a different colour or font…. so that the person reads both…. and to make user read it as “Ample Example” the size of “Ample” would be bigger than the rest of the letter i.e. e and x, in this case….

    Does anybody know it?

  49. 60

    premangshu mukherjee

    October 7, 2010 10:10 pm

    what type of color combination will be used for making a newspaper website?

  50. 61

    Brett Widmann

    November 6, 2010 7:07 pm

    Another great set of resources to help understand color. Thanks for sharing!

  51. 62

    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.

  52. 63

    Really helpful and to the point article. Thanks!

  53. 64

    sanjay meshram

    November 6, 2013 8:27 pm

    thank you very much for describe me about color.

  54. 65

    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


↑ Back to top