Color Theory In Practice

Nare K.
9 min readJun 17, 2017

--

The color theory is an entire branch of both science and art, hence, it would be difficult to touch upon all the details and nuances that it encloses in a single post. Bellow, I try to cover the very basics of the theory at the same time referring to its applications in design.

What is color and how we see it

Merriam-Webster dictionary defines color as a phenomenon of light or visual perception that enables one to differentiate otherwise identical objects. Three keywords here are “light”, “perception” and “differentiation”. We frequently think of color as a property of an object. However, it is merely the reflection of light on a particular surface as perceived by our eyes. As perception is something that is inherently subjective, it is difficult to talk about color in objective terms. Nevertheless, as an optical phenomenon it has been studied a lot and theories were developed about the various interrelations between different colors and the way human eyes perceive it.

Color theories are centered upon the idea of the color wheel. It is an abstract illustrative organization of colors around a circle, which shows the relationships between primary colors, secondary colors, tertiary colors, etc. Sir Isaac Newton developed the first circular diagram of colors in 1666. Since then, scientists and artists have studied and designed numerous variations of this concept.

  • Primary Colors

Primary colors are red, yellow and blue. In traditional color theory, primary colors are the 3 pigment colors that cannot be mixed or formed by any combination of other colors. All other colors are derived from these 3 hues.

  • Secondary Colors

Secondary colors are green, orange and purple. These are the colors formed by mixing the primary colors in equal amounts.

  • Tertiary Colors

Tertiary colors are yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green. These are the colors formed by mixing a primary and a secondary color in various proportions.

The color wheel: warm/cool/neutral colors and their meaning

All the colors in the color wheel are generally categorized into warm, cool and neutral colors depending on the associations with seasonal colors observed in nature as well as on the feelings that they create.
Warm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises. They are generally energizing, passionate, and positive. Warm colors can be used to reflect passion, happiness, enthusiasm, and energy.

  • Red

Red is a very hot color. It’s associated with fire, violence, and warfare as well as with love and passion. Red can also associated with importance, danger, or anger. It can even have a physical effect on people (e.g. raising blood pressure, respiration rates or enhancing the metabolism). Outside the western world, red has particular associations. For instance, in China, it’s the color of prosperity and happiness. In South Africa, however, red is the color of mourning. It is also associated with communism.

  • Orange

Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with fall. Orange an represent change and movement in general. Also, it is frequently associated with health and vitality. Orange attracts attention without being as overpowering as red; it’s more friendly and inviting.

  • Yellow

Yellow is usually considered the brightest and the most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow is also associated with hope. However, it is sometimes associated with deceit and cowardice. In some countries, yellow has different connotations. For instance, in Egypt, it is the color of mourning. In Japan, it represents courage, and in India it’s the color of merchants.

Cool colors include green, blue, and purple. They are often more subdued than warm colors. They are the colors of night, of water, of nature. Cool colors are usually calming, relaxing, and somewhat reserved. Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Cool colors should be used to give a sense of calmness or professionalism.

  • Green

Green is a very down-to-earth color that can symbolize renewal and abundance. On the negative side, green can represent envy or jealousy, and a lack of experience. Green has many of the same calming properties of blue, but it also incorporates the energizing nature of yellow. Green can have a balancing, stabilizing and harmonizing effect.

  • Blue

Blue can be associated with sadness. It is also used to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues appear strong er and more reliable. Blue is also associated with peace, and might have spiritual/religious connotations in many cultures.

  • Purple

Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too. In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.

Neutral colors often serve as the background. They’re commonly combined with brighter accent colors. However, they can also be used on their own to create very sophisticated layouts. The meanings and impressions of neutral colors are largely affected by the colors that surround them.

  • Black

Black is the strongest of the neutral colors. It’s associated with power, elegance, and formality. However, it can also be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures. It can be either conservative or modern, traditional or unconventional, depending on the other colors it’s surrounded with.

  • White

White is at the opposite end of the spectrum from black, but similar to black, it works well with all other colors. White is often associated with purity, cleanliness, and virtue. In the West, it is usually worn by brides. White is associated with goodness. It is frequently used as a neutral backdrop that lets other colors in a design be more compelling.

  • Gray

Gray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black. Gray is generally conservative and formal, but can also be modern.

  • Brown

Brown is associated with the earth, wood, and stone. It’s a natural color and more of a warm neutral. Brown can be associated with dependability and reliability, with earthiness. It can also be considered dull. Brown is frequently used as a background color. It helps bring a feeling of warmth and wholesomeness.

  • Beige

Beige can take on cool or warm tones depending on the colors it’s surrounded with. It has the warmth of brown and the coolness of white. It’s conservative in most instances, and is usually used in backgrounds. It can also symbolize piety.

Concepts and Terminology: hue, chroma, saturation, value, tones, shades, tints

To understand the nuances of colors and the feelings that they convey, it is important to understand how they are composed of and what is the basic vocabulary used to describe them.

  • Hue

Hue is the most basic of color terms and basically 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.

  • Chroma

Chroma refers to the purity of a color. A hue with high chroma contains no black, white or gray. Adding one of these reduces its chroma. Chroma can be thought of as the brightness of a color in comparison to white. It’s better to avoid using hues that have a very similar chroma.

  • Saturation

Saturation refers to the way a hue appears under specific lighting conditions. Saturation should be thought of in terms of weak vs. strong or pale vs. pure hues. Colors with similar saturation levels make more cohesive designs. As with chroma, colors with similar but not identical saturations can be unpleasantly jarring.

  • Value

Value is essentially the “lightness” of the color. Lighter colors have higher values (e.g 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 designs, it’s better to favor colors with different values, especially ones with high chroma. High contrast values are usually more aesthetically pleasing.

  • Tones

Tones are created when gray is added to a hue. Tones are duller or softer-looking than pure hues. Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel. Depending on the hues, they can add a sophisticated or an elegant look.

  • Shades

Shades are created when black is added to hues. When designing pieces, very dark shades are sometimes used instead of black and can serve as neutrals.

  • Tints

Tints are formed when white is added to hues, lightening them. Very light tints are sometimes called pastels, however, any pure hue with white added to it is a tint.

Color schemes

In color theory, a color scheme is the choice of colors used in design for a range of media. Color schemes are used to create style and appeal. Basically, anyone can construct a nice-looking color palette by using the concepts/properties introduced above intelligently. However, certain geometry and physics-based schemes exist that can help construct inherently harmonious color palettes.

  • Monochromatic

Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue.

  • Analogous

Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Generally, analogous color schemes all have the same chroma level, but by using tones, shades and tints we can add interest to these schemes and adapt them to our needs.

  • Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades. A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be very jarring visually. This is best avoided.

  • Split-complementary

Split-complementary schemes are almost as easy as the complementary scheme. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.

  • Triadic

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes.

  • Double-complementary (Tetradic)

Double-complementary color schemes are probably the most difficult schemes to pull off effectively.

Producing color: CMYK vs RGB

There are various ways to produce colors for our eyes when designing pieces. The most common ones are based on RGB (red, green, blue) and CMYK (cyan, magenta, yellow, black).
RGB colors are also known as “additive color”. In this method, colors are being added together to achieve other colors until the outcome is white. This is because our eyes receive no reflected light; they perceive the color to be black. When one adds portions of red + green + blue the outcome is the CMYK colors as shown below. While in turn, subtracting cyan — magenta — yellow — black, one gets the RGB colors. CMYK colors are subtractive for this reason that it starts with all colors and when colors are subtracted the outcome is white.

When it comes to deciding whether to use RGB or CMYK, first one should know in which format the output must be. If it will be in a digital format, then RGB is the way to go. If the piece will be printed, CMYK is usually the best option.

I hope, the article appeared helpful for understanding colors better. Now, you can make more well-informed decisions about the use of colors to communicate messages better and augment their meanings..

--

--

Nare K.

Bridging the gap between design, technology and business.