color theory

Color theory: Tints and shades

Graphic Designers deal with tints and shades in their work. Tints and shades deal with the contrast of dark and light which determine the strength of the colors of an image, rather then the hue. So it is the contrast in values that effects readability of text, for instance, not the hue in itself. Tints and shades are the less saturated version of a color and are are used more often then the full saturated version of a color. Diluting a fully saturated color results in tints and shades.

You can see in this example how tints effect readability.

Shade: a darker version of a hue, shades are sometimes described as hues with black added. Can be referred to as “added dark”

Tint: a lighter version of a hue, tints are sometimes described as hues with white added. Can be referred to as “added light”

Tinting will increase the light reflective properties of a hue. A small amount of white added to a hue will create a strong and brilliant tint and create a stronger effect then the original saturated hue. Shades do the opposite of this. They dillute the intensity of a hue, since black aborbs all wavelengths of light. Using grey can dilute a pure hue, as well as adding some of the compliment of the color.

Here is an example that shows how tint and shade alter the hue of pure red.


Color Contrast

Color Contrast

Controlling contrast is a good method for establishing Hierarchy and dominance in a layout. When looking at the color spectrum on a black background, the eyes are drawn first to the colors with the highest luminosity, yellow and cyan. You might notice the dark blue later because it contrasts less with the black background.

If you then compare the same color spectrum surrounded by white, the lighter colors such as cyan and yellow do not stand out as much because they contrast less from the white background.

By understanding contrast, you can have a greater control over the impact that the layout elements such as color, font and imagery, have on your design.

You can use this tool to check the contrast of your chosen foreground and background colors. It will tell you if your chosen colors pass or fail.

Psychology of Color


Color has a profound effect on the human experience and psyche. Every person has their own personal associations with color and each culture, family, society, and religion have their own unique ways of perceiving and reacting to individual colors. Use of color has psychological effects and is associated with medicine as well. Today I will take a look at how American culture views each of the seven main colors of red, orange, yellow, green, blue, purple, black and white.


Red is one of the most powerful colors of the spectrum. The color red is associated with all types of emotions, both high and low. For example, red is coupled with love and passion as well as violence and fire. Red is known to have a stimulating effect on energy levels in humans. It is an incredibly visible color and is often used for cautionary purposes, such as red stop signs or red fire hydrants. Both the human eye and human brain strongly perceive and react to red.


Another warm, infusing color is yellow. While most people associate yellow with being a bright and cheery hue, it also has the potential to appear cautious. Street signs, caution tape, and other warnings are often in yellow to attract our attention before we could get hurt. In nature, many toxic plants and animals, such as snakes and frogs, have yellow accents to ward off potential predators.

Radiation Area


Orange is produced by mixing the primary colors of red and yellow, and is thus a secondary color. The joys of yellow and the striking visibility of red combine to produce the energetic color orange. Orange is stimulating and warm. Orange is a good color to use to draw attention to something without appearing as harsh as red or as bright as yellow.



Green is a secondary color as it is created by combining two primary colors, blue and yellow. Green is a prevalent hue, as it is one of the most dominant colors found in nature. Almost every climate across the globe has naturally green flora and fauna. Because it is so widely recognized as a naturally occurring element, the color green is associated with growth and wealth.

Spruce Green


Another color dominant in nature is blue. Blue represents both water and sky and is associated with stability and tranquility. The calming effects of blue are so well known that many logos of Corporate America utilize this hue. Corporations use the color to appear more calm and trustworthy to clients and potential customers.



Purple, like orange and green, is a combination of two primary colors and is therefore a secondary color. Because it is usually created with a 50/50 ratio, purple also bears the characteristics of both colors of which it is made. It maintains an energetic, powerful feel from its red component; likewise, the stability and depth of blue influences how purple is perceived.

Purple is different from other colors in the fact that it is not common in Nature. Granted, some flowers and plants have purple tints, but they are few in number. Because it is a rare pigment to find naturally, purple used to be a rather expensive color to obtain; it was often reserved for noble, royal individuals who could afford such an expense. To this day, purple is associated with kings and queens as well as magic and mystery.

Erika Musik En Viu


The color white is typically associated with luminous, pure items. Angels are historically depicted in white, as are many other Heavenly bodies and settings. Based on its purity, white is also associated with cleanliness. Pure white soap is considered the Gold Standard in cleanliness; all absence of every other color is the highest level of clean one could obtain.

Wedding Dresses


Considered to be mysterious, black is a very complex color. It can convey sorrow and angst, as seen in the trend of black for funerals and death. Black also may appear luxurious and trendy, such as a black stretch limo or a black tie affair. As is the case with most colors, black needs to be considered on an individual basis based on its surroundings and connotation.

Halloween Night

And there you have some examples of how color affects the psyche.

Perception of Light – Metamarism


Understanding how the human eye perceives light is an important concept in Design. Color is not perceptible without light and how we perceive color is influenced by physics and lighting atmosphere. Different sources of light will create different color results. Take a tree for example. In a simplified view, a tree is made up of green leaves and brown bark, but looked at in the morning compared to mid day, the perception of the color differs because of the change of intensity of the sunlight and other atmospheric changes. This phenomena is known as Metamarism.

Metamarism is the visual phenomenon of an object appearing to have changes in color due to variances in the source of light. This is an important design concept to remember! Each light source is unique, and chosen colors will look very different with even the slightest change in light.

When considering digital or print design, the way your website or printed brochure appears to the consumer is largely dependent on their monitor, office lighting, and where they are viewing the brochure (indoors, outdoors, etc.).

These paintings by Claude Monet are the same cathedral at different times of day. This is Metamarism at work.


Color Study – Comparing Uses of Color – Gurney, Matisse and Dali