color theory for designers, part 2 understanding concepts and terminology

8/10/2019 Color Theory for Designers, Part 2 Understanding Concepts and Terminology

1/33

Color Theory For Designers, Part 2:Understanding Concepts And

Terminology ByCameron Chapman February 2nd, 2010

Color TheoryColorsLegacy

65 Comments

Advertisement

If youre going to use color effectively in your designs, youll 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. InPart 1: The Meaning of

Colorof our color theory series, we covered the meanings of different

colors. Here, well go over the basics of whataffects a given color, such as

adding gray, white or black to the pure hue, and its effect on a design,

with examples of course.

HueHueis the most basic of color terms and basically denotes an objects color. When we

say blue, green or red, were talking about hue. The hues you use in your

designsconvey important messagesto your websites visitors. Read part 1 of this

article for the meanings conveyed by various hues.

EXAMPLES
http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/author/cameron-chapman/?rel=authorhttp://www.smashingmagazine.com/author/cameron-chapman/?rel=authorhttp://www.smashingmagazine.com/author/cameron-chapman/?rel=authorhttp://www.smashingmagazine.com/tag/color-theory/http://www.smashingmagazine.com/tag/legacy/http://www.smashingmagazine.com/tag/legacy/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/#commentshttp://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/#commentshttp://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://en.wikipedia.org/wiki/Huehttp://en.wikipedia.org/wiki/Huehttp://en.wikipedia.org/wiki/Huehttp://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/#commentshttp://www.smashingmagazine.com/tag/legacy/http://www.smashingmagazine.com/tag/color-theory/http://www.smashingmagazine.com/tag/color-theory/http://www.smashingmagazine.com/author/cameron-chapman/?rel=authorhttp://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/


2/33

The primary hue of the background and some of the typography on the Happy Twitmas

website is bright red.

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.
http://chapolito.com/http://www.happytwitmas.co.uk/http://chapolito.com/http://www.happytwitmas.co.uk/


3/33

Pure red is a very popular hue in Web design.

Mix uses a number of pure hues in its header and logo.
http://www.visitmix.com/http://estilorama.com/http://www.visitmix.com/http://estilorama.com/


4/33

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

colors.

Chroma

Chromarefers to the purity of a color. A hue with high chroma has no black, white orgray in it. Adding white, black or gray reduces its chroma. Its 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
http://en.wikipedia.org/wiki/Chromahttp://en.wikipedia.org/wiki/Chromahttp://www.steveottenad.com/http://en.wikipedia.org/wiki/Chroma


5/33

Cyan has a high chroma and so really stands out against black and white.
http://www.annyas.com/screenshots/


6/33

Another website with a high chroma blue, though it includes some tints and shades with

somewhat lower chromas.
http://www.canalconnection.com/


7/33

Combining high and low saturation in the same hue can make for a sophisticated and

elegant design.

Colors with very high chroma are best used in moderation, as done here.
http://fruehjahr.ch/http://philippdoms.com/portfolio/http://fruehjahr.ch/http://philippdoms.com/portfolio/


8/33

Differences in chroma can make for a visually pleasing gradient.

SaturationSaturationrefers 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
http://en.wikipedia.org/wiki/Saturation_%28color_theory%29#Saturationhttp://en.wikipedia.org/wiki/Saturation_%28color_theory%29#Saturationhttp://panelfly.com/http://en.wikipedia.org/wiki/Saturation_%28color_theory%29#Saturation


9/33

The saturation levels of many of the different hues used here are similar, adding a sense

of unity to the overall design.
http://www.sifrvault.com/


10/33

Combining colors with similar muted saturation levels creates a soft design, which is

emphasized by the watercolor effects.
http://www.rainbeaumars.com/


11/33

Hues with lower saturation levels arent necessarily lighter, as shown here.
http://disfrutasanjuan.com.ar/


12/33

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.
http://www.craft-sale.co.uk/


13/33

Aother example of how low saturation colors make nearby high saturation colors really

stand out.

ValueValuecould also be called lightness. It refers tohow light or dark a color is. Ligher

colors have higher values. For example, orange has a higher value than navy blue ordark 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
http://en.wikipedia.org/wiki/Lightness_%28color%29http://en.wikipedia.org/wiki/Lightness_%28color%29http://sunrise-soya.com/http://en.wikipedia.org/wiki/Lightness_%28color%29


14/33

The high value of the yellow used here really stands out against the lower-value black

and gray.
http://www.creativespark.co.uk/


15/33

This website combines blue hues with two different values. Because the different values

have enough contrast, the overall look is visually appealing.
http://www.oysterdesign.co.uk/


16/33

Combining colors with similar values makes for an energetic and lively background

(which is enhanced by the design itself).
http://www.copimaj.ro/


17/33

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

the white.
http://www.whoseview.ie/index.html


18/33

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

TonesTones 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 certainvintage feel to websites. Depending on the hues, they can also add a sophisticated or

elegant look.

EXAMPLES
http://www.colourpixel.com/


19/33

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

flair.
http://www.lakesideheritagesociety.org/


20/33

This website combines blues in a variety of tones, shades and tints.
http://brightkite.com/


21/33

Tones can be intensified by adding gray around them, as done here.
http://mmuller.com/blog/


22/33


23/33

A great example of how a pure hue can really stand out against a background of tones.
http://www.mergeweb.com/


24/33

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.

ShadesAshadeis 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 bythe 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
http://en.wikipedia.org/wiki/Tints_and_shadeshttp://en.wikipedia.org/wiki/Tints_and_shadeshttp://en.wikipedia.org/wiki/Tints_and_shadeshttp://www.metalabdesign.com/http://en.wikipedia.org/wiki/Tints_and_shades


25/33

Jonathan Moores website has a variety of different shades of purple in the background

(and a couple of tints in other parts).

Using different shades together works well, as long as sufficient contrast between them

is maintained.
http://www.vuu.com.au/front/http://jonathanmoore.com/http://www.vuu.com.au/front/http://jonathanmoore.com/


26/33

An effective combination of shades and tints, particularly in the header.
http://alilot.co.il/


27/33

Another background design that has shades (and a few tints) in a textured gradient.
http://skipvine.ro/ro/


28/33

Combining shades within textures adds interest to this website.

TintsA 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
http://stuffandnonsense.co.uk/work/


29/33

Caio Cardosos website has a variety of green tints in the background and in other

elements.
http://www.caiocardoso.com/


30/33

The blue tint on Fernando Silanesswebsite creates a soft and sophisticated look.
http://www.fernandosilanes.com/


31/33

Blue tints are popular for sky and nature motifs.
http://www.du-bout-des-yeux.com/


32/33

Tints are also popular in watercolor-based designs.

Tints combined together make for a sophisticated gradient.
http://iamgarth.com/http://www.smallwhitebear.com/http://iamgarth.com/http://www.smallwhitebear.com/


33/33

ConclusionWhile you dont 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, heres a cheat sheet to jog

your memory:

Hueis color (blue, green, red, etc.).

Chromais the purity of a color (a high chroma has no added black, white or

gray).

Saturationrefers to how strong or weak a color is (high saturation being strong).

Valuerefers to how light or dark a color is (light having a high value).

Tonesare created by adding gray to a color, making it duller than the original.

Shadesare created by adding black to a color, making it darker than the original.

Tintsare created by adding white to a color, making it lighter than the original.

Further Resources Glossary of Color Terms

An excellent reference from Color Cube.

Design Tip: Saturate Your Colors

An older article, but still has some valuable information.

Elements of Design: Value and Color

An excellent lesson in color from the University of Saskatchewan.

Color

An article from Design Notes about color and how we perceive it.The Whole Series Color Theory for Designers, Part 1: The Meaning of Color

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

Color Theory for Designer, Part 3: Creating Your Own Color Palettes

(al)
http://www.colorcube.com/articles/theory/glossary.htmhttp://www.colorcube.com/articles/theory/glossary.htmhttp://www.netmechanic.com/news/vol4/design_no13.htmhttp://www.netmechanic.com/news/vol4/design_no13.htmhttp://www.usask.ca/education/coursework/skaalid/theory/cgdt/color.htmhttp://www.usask.ca/education/coursework/skaalid/theory/cgdt/color.htmhttp://daphne.palomar.edu/design/color.htmlhttp://daphne.palomar.edu/design/color.htmlhttp://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/http://daphne.palomar.edu/design/color.htmlhttp://www.usask.ca/education/coursework/skaalid/theory/cgdt/color.htmhttp://www.netmechanic.com/news/vol4/design_no13.htmhttp://www.colorcube.com/articles/theory/glossary.htm

color theory for designers, part 2 understanding concepts and terminology

Documents