Understanding Concepts And Color Terminology
Extracted from: https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
Hue
Hue 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.
Test your knowledge here.
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.
HeadOfffice uses such a bright pure yellow hue that it’s almost difficult to look at.
Pure red is a very popular hue in Web design. This site also incorporates other pure hues as the main photo changes.
Chroma
Chroma 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.
The difference in chroma between the pink and dark purple on this site provides solid contrast in the design.
Combining a variety of hues with the same chroma creates a harmonious background pattern.
The low chroma colors in this design contrast nicely against the black typography.
Saturation
Saturation 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.
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.
Warm, less saturated hues like the ones found on this site give a decidedly feminine feel to the design.
Value
Value 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.
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
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.
Pink becomes dusty rose as a tone.
This website combines blues in a variety of tones, shades and tints.
Purple takes on a twilight quality when gray is added.
Shade
A shade 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.
Joni Korpi’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).
Navy blue and dark red are commonly used shades in political designs.
Shades of blue and yellow combine to create a nautical-themed design.
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 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.
Pink is a tint of red, and the two different versions of it here work beautifully together.
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.
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.
We are not going to get into the next part of the article. However, I strongly advise you reading up about it.
> Color Theory for Designers: How To Create Your Own Color Schemes