← Back

Color Theory

Online Graphic Design Degree:  Color Theory and Application

 

How can you enhance a verbal message or convey an idea without using words at all? Color. The fields of graphic design and web design have long exploited the physics and theories of color to forge a deep connection with their audiences. How a designer goes about using color is affected by both the message itself and the medium of its delivery.

  • Additive Color

Additive color refers to the mixing of colors produced by different sources of light. The three primary colors of additive color mixing are red, green, and blue, which is why additive color is also referred to as RGB. It is the principle which governs the spectrum of colors available to designers working on or for a computer. Monitors produce images using multiple instances of light beamed directly to the viewer’s eye. As a result, colors in the additive spectrum tend to appear more vivid in comparison to printed materials.

While additive color mixing may not be able to achieve the level of tonal gradation found in subtractive color mixing, the spectrum of available colors is actually greater; though in designing for websites, designers must also take into consideration whether or not a web browser can support the colors that he or she has created. Most design programs are now able to produce a near-equivalent web-safe color if that is the ultimately intended use of the designed product. When working in HTML or CSS, every web-safe color has a specific code which causes the browser to display the selected element in that particular color.

  • Subtractive Color

Subtractive color refers to the mixing of pigments, aptly termed subtractive because the amount of light absorbed into the color increases as additional pigments are mixed, causing a resultant darkening of value. There are different primary colors depending on the medium with which a designer is working. All non-print and non-web subtractive colors take red, blue, and yellow as their primaries, and by mixing the three in equal proportions the resulting color is black. Black’s inclusion in the four-color printing process comes from the inability of cyan, magenta, and yellow to make a solid black by being mixed together. They instead create a very dark grey. For designers working in print the inks used are cyan, magenta, yellow, and black. The acronym CMYK is therefore used when referring to a color mode which contains the necessary information for a print shop to properly execute a designer’s work.

  • Discrepancy

Due to the contrasting physical natures of RGB and CMYK colors, what is seen on the screen while a designer works on a project will not necessarily correlate to what is printed out. This can be readily evidenced when a designer switches color modes on the graphics program in which he or she is working. This can also create problems when the project goes to print and the file is still in RGB mode — resulting in the printer’s inability to translate the information — or a misinterpretation of the information presented occurs, marring the final product. It is important for a designer to take this into consideration and, if possible, to make sure to operate in CMYK mode from the beginning of a project if it is meant to be printed. Though the algorithms in many software packages currently offer CMYK colors that almost parallel RGB colors, the differences are significant enough that they should be taken into account.

  • Spot Colors

If a designer is working with a restricted budget, there is a way to reduce the usage of ink in the printing process. By selecting one swatch or two from any of the pre-established color matching systems available, the designer can reduce the number of inks used by the printer to two or three, which will also help in reducing the ultimate cost of a project. Spot colors are mixed prior to usages, removing the need for the four-color printing process. Through the use of screens of a single color, a designer can utilize the full range of values available to that particular color.

hue labels a color by where it can be generally located on the spectrum — red, orange, yellow, green, blue, violet — and provides an intersubjective base from which colors can be referred.

Saturation relates to the scale of a hue’s purity. High saturation levels produce colors which are intensely vivid. While these can be useful in a design context, utilizing too many highly saturated colors in a design can serve to weaken a design’s message or create visual disturbances for the viewer.

Brightness, or Value, is used to refer to a color’s relation to white or black. Most computer programs have placed this scale on a range from 0 (black) to 255 (white). Using contrasts in values can be a way of emphasizing connections between elements or the hierarchy regulating the viewer’s attention within a given work. Adding white to a hue creates tints. If a design is being run through a printer, tints are created by lessening the amount of ink which is applied to a surface. If black is added to a hue, shades are created. In RGB color modes, shades are the result of decreasing the amount of light emitted from the monitor.

When deciding on an appropriate color palette for a project, the grouping of various colors can have either a harmonious and pleasing effect or cause an unsettling sensation to occur within the mind of the viewer. By studying colors and their aesthetic interrelationships, color theorists have been able to establish rubrics of relations between colors which create a pleasing sense of balance between the elements within a given image. The following harmonies are based on the 12-part color wheel made of the primaries red, yellow, and blue, along with the correlated secondaries and tertiaries. Similar harmonies can be achieved by using the additive color wheel as well. Though the harmonies presented below are generally accepted and there exist many web pages and web tools for the purpose of determining a suitable color palette, practice and development of one’s sense for color will aid in creating a project’s optimal palette.

  • Monochromatic

Monochromatic color harmonies require the designer to work with only one hue and all the tints and shades available through the additions of white or black to that particular color along with either pure black or pure white. Through the use of such a restricted palette, a sense of unity prevails throughout the image and also allows the designer to manipulate the path of the viewer’s eyes solely through the use of value.

  • Complementary

Though called a harmony, using a complementary palette requires a designer to utilize two colors which are directly across from each other on the color wheel (Red-Green, Yellow-Purple, Blue-Orange, etc.). If mixed, these colors would result in either dulled versions of the dominant color or a straight brown. When juxtaposed, they present a very dynamic interplay. A variation on the complementary color palette is the split complementary, where a designer uses one color and then the two colors which sit immediately beside the selected color’s complement (Red, Yellow-Green, and Blue-Green or Violet, Yellow-Green, and Yellow-Orange, being examples)

Designers should take note that the use of complementary or split-complementary palettes, when juxtaposing colors of a similar saturation and value, may result in what is termed simultaneous contrast. This causes a vibrating effect in the image and can make reading text difficult or can be effectively used in the case of many psychedelic posters from the 1960s.

  • Analogous

Analogous color palettes are built by using a series of adjacent colors on the color wheel. Though some only limit the number of allowable colors to three, other definitions of an analogous color scheme allow up to five colors, so long as there is never more than one primary color in the palette being employed. Analogous color schemes are similar to monochromatic harmonies, given that the relationship between the colors is based on the presence of a particular hue throughout the whole. However, analogous palettes allow for more variation than a monochromatic palette, especially when the palette is extended from three colors to four or five. The lack of simultaneous contrast within analogous color schemes is thought to be one of the reasons that such palettes create a more unified and harmonious sensibility when employed, though they are also one of the less commonly used palettes in current design.

  • Triad

Triads are based on an equilateral triangle being drawn within the color wheel (examples being Red-Orange, Yellow-Green, and Blue-Violet, or simply using the three primaries or three secondaries for a palette will also result in a triad). Triadic color schemes benefit from their inherent ability to provide vibrancy and contrast while still retaining a sense of stability. If planning on using a triadic palette, it is recommended that the designer choose a single dominant color and use the rest of the palette to add subtle nuances to the image, rather than have all three compete for dominance.

  • Tetrad

Also known as the Double Complementary color scheme, tetradic schemes use two pairs of complementary colors as the foundation of the palette. While it is exceptional in the variety of color choices it offers to the designer, being able to harmonize the entire image can be a challenge, leading to a similar recommendation with the triadic scheme — have one or two dominant colors and use the others as accents or support. Too many colors vying for dominance within the image will only serve to unbalance it and act against the designer’s intent to create an order within the design which aids the viewer’s ability to gain information from the work.

  • Psychological Associations of Color

While there is little doubt that colors do elicit certain responses from an audience, the exact nature of such phenomena is debatable. Theoreticians have sought to codify the particular emotions which are associated with a given color, acting on the presupposition that colors act in an archetypal fashion, as Dr. Carl Jung described certain symbols and images in his studies regarding the unconscious. Research into the subject has shown that many of the associations made with color are built on a local or cultural foundation. A single color cannot often be relied upon to have a reliable stimulus-response correlation between varying cultures. However, this has not stopped those who seek to establish a definitive language of color and emotion which can be universally applied.

  • Further Reading

Colour Harmony Revisited, by  Zena O’Connor – A University of Sydney paper looking at the deficiency of older models of color harmony and arguing for a new theory

The Functions of Color, by Eirik Frisvold Hanssen – Explores the use of color in various artistic media over the centuries

HTML Color – From Colorado State University’s Engineering Network Services, provides the hexadecimal codes for a wide variety of web-safe colors.

Applying Color Theory to Digital Displays: Part 1Part 2Part 3 – Series of articles on how front-end web designers can use the basics of color theory to improve a site’s usability

International Council of Graphic Design Associations – Provides links to its members’ websites and a gallery, providing examples of current work being done in the field

Design Principles: Color – A simple and visually effective presentation on basic color theory and application

Effective Visual Communication for Graphical User Interfaces, by Suzanne Martin – Article on how to create web pages which aid users to find information, with a discussion on how to incorporate color at the end

Art Directors Club – An association, devoted to the art of advertising since 1920

The Society of Graphic Designers of Canada – Showcases the work being done in Canadian graphic design

Image Credit: RGB CMYK4; Wikimedia Commons, Sparkit, 2006