Art and the Web: Color

We are excited to announce Carsonified’s second book called ‘Art and the Web: Value, Texture, & Color’ written by Nick Pettit. This book is part of a larger series that Nick is writing about the elements and principles of art, as they relate to the web. We are releasing each chapter as a blog post on Think Vitamin and at the end, you will be able to download the entire book for free. — Ryan Carson.

Cover artwork for the book 'Art and the Web: Value, Texture, & Color'

Introduction to Color

The relationships between colors are fairly complex. This may also be why we frequently hear the term "Color Theory" but not "Value Theory" or "Texture Theory" for example. In the chapter about value, we said that values can exist without color, but color cannot exist without value. While this is true, it’s not the whole truth. Every color has a value, but it’s completely possible for several colors in a group to all have the same value, thus negating the contrast between light and dark. To see this in action, a color spectrum or a "rainbow" can be desaturated. Saturation calculations are typically very rough and a truly desaturated rainbow should simply appear as a flat grey block, however, a rough approximation is enough. In the images below, notice how the color version has several areas where the colors appear to be separated. Then in the image on the right, see how the desaturated version features fewer clear bands of separation.

A rainbow of color on the left, with the desaturated version on the right.

For thousands of years, various meanings have been applied to colors. In many cultures, red is the color of love, while blue is considered to be strong and masculine. However, for our purposes, meaning in color isn’t useful as much as it’s something to simply be aware of. For example, while red is associated with love and weddings in Chinese culture, it is also associated with good luck and fortune. In the western world, green tends to be the color that’s most associated with good luck and fortune. When designing websites, colors should be chosen more carefully when designing a site for an unfamiliar audience or culture.

It’s almost impossible to define color without the use of scientific terms, because it’s not easily relatable to other senses. For example, if an individual with a vision impairment were to ask about the elements of art, things like line, shape, form, and texture would be fairly easy to convey. Color is much less tangible, and changes in the wavelength of light are as fleeting as changes in the pitch of a sound. However, for sighted individuals, here’s a formal definition:

Color is the use of hue in an image.

This definition isn’t very satisfactory for anyone, but the truth is, color is probably the most complex element or principle of art. It’s difficult to reduce the idea of color to a sentence or two, and again, this is why artists and scientists alike benefit from the use of color theory.

William Turner, The Slave Ship (1840)William Turner, The Slave Ship (1840)

Color Models

Color theory in its unabridged form is very complex and a bit beyond the scope of this chapter. However, as web professionals, there are a few aspects with which we should be familiarized. The first concept we’ll focus on is what are called color models, which create a framework that describes how colors should interact and behave. There are two categories of color models: additive and subtractive.

Additive Color

During the 19th century, the Scottish theoretical physicist James Clerk Maxwell pioneered the world’s understanding of additive color. In 1861, he took three black and white photographs of the same object. One photograph used a red filter, one used a green filter, and the last one used a blue filter. After developing the images, he set up three projectors, using the same red, green, and blue filters. When the light from the three projectors was composited into a single image, it formed a full-color picture, thus demonstrating the additive color model.

When all the wavelengths of light in the visible spectrum combine, they form white light. The basic premise of additive color models is that if you start with the absence of light (black), various colors can be added together to make other colors. The more color that is added together, the whiter the color becomes. As an example, the RGB (red, green, blue) color model that is used in computer graphics is an additive model. In fact, the RGB model goes deeper than that. The human eye has trichromatic red-green-blue vision. Long, medium, and short "cone" cells in the retina allow us to perceive red, green, and blue light, respectively. When these three wavelengths are combined, other colors emerge, allowing us to see the visible spectrum (some colors better than others).

A red circle, green circle, and blue circle intersect to form white light.

This understanding of color isn’t the full picture, however. Historically, in all color models, it has been believed that three primary colors can create all other colors in the spectrum, and red, green, and blue are considered to be the additive primaries. This is, in fact, false. The truth is, electromagnetic radiation travels at different wavelengths, and when the length of the waves and the intensity are modulated, different colors are produced. Primary colors are a helpful construct in discourse on color theory, but in reality, they are imaginary and only capable of producing a subset of all possible colors, called a gamut. RGB is one such example of a gamut.

Subtractive Color

As the term implies, subtractive color is the opposite of additive color. Instead of adding color to black, color is subtracted from white. This is not the way that light or the human eye works, but it is indeed how paints, inks, and dyes work. When a colorant medium is placed on a piece of paper or a canvas, some wavelengths of light are blocked and others are reflected. This is why most paper or canvases start out white; they reflect as much light as possible before it is blocked by ink or paint.

A yellow circle, magenta circle, and cyan circle intersect to form a dark color.

The CMYK color model is an example of a subtractive color model, making it a common choice for print work. The “primary” colors are cyan, magenta, and yellow, although an undertone of black is typically used as well. These primary colors are not far from the primary colors, red, yellow, and blue, that are typically taught to young children in school. As a result, most people understand subtractive color mixing quite well: red and yellow make orange, yellow and blue make green, and blue and red make purple.

Wassily Kandinsky, Composition VII (1913)Wassily Kandinsky, Composition VII (1913)

Color Schemes

A color wheel is an abstract representation of the color spectrum in the shape of a circle. Normally, the color spectrum is seen arranged in a straight line, but a circular arrangement makes it much easier to see and understand the relationships between colors.

A circle with every color in the visible spectrum, known as a color wheel.

These relationships, sometimes referred to as “color schemes,” are analytical methods of mixing colors. There are an infinite number of ways to create color schemes, but here are a few examples.

Monochromatic

A set of blue colors that become increasingly dark from left to right.

A monochromatic color scheme is a set of colors that all have the same hue, but different values (known as tints and shades). These color schemes tend to feel stoic, authoritative, and sometimes they can even feel melancholy.

Analogous

A set of yellow, orange, and green colors.

Analogous colors are three colors that are adjacent to each other on the color wheel. For example, orange, yellow, and green, is an analogous set. Analogous schemes tend to feel relaxed and are frequently found in nature such as in fall leaves or in a summer sunset.

Complementary

The colors orange and blue placed adjacent to one another.

Every color on the color wheel has a compliment, or color opposite. To find the color opposite of any color, simply find the color directly across from it. Common complimentary pairs include red and green, blue and orange, and purple and yellow. These color schemes tend to be extremely vibrant and bold, so they should be wielded carefully.

Warm and Cool

A set of cool blue and green colors.

Warm and cool color schemes represent two halves of the color wheel. Warm colors such as red, orange, and yellow, tend to feel "hot" like fire. Cool colors such as green, blue, and purple, feel "cold" like ice.

Hue, Saturation, and Lightness

While color is the use of hue in an image, again, this is the truth, but it isn’t the whole truth. In addition to hue, there’s also saturation and lightness. Together, they form HSL, which is a common representation of the RGB color space. HSL, along with several other representations, were developed in the 1970s for use in computer graphics. Today, HSL drives color pickers and many other graphics related tasks. The HSL representation is visualized as a cylinder.

An HSL cylinder which represents changes in hue, saturation, and lightness.

Hue

Hue itself is difficult to define outside of wavelengths of light energy, but at best, hue might be described as a visual sensation that corresponds to one of the named colors. In essence, hue is pure color, and in the HSL model it is represented by the radius of the cylinder. Each degree is a different hue, separate from saturation and lightness.

Saturation

Saturation is much less straightforward than hue or even lightness and, mathematically, most color models are only capable of making rough approximations of saturation. For our purposes, there’s no practical need to delve into the technical complexities, so we’ll commit the color-science-sin of defining saturation in the same way that the HSL model defines what is called chroma. Basically, saturation is the brilliance or intensity of a color. In the HSL cylinder, the central core is completely desaturated, while the outer edges are at full saturation.

Lightness

Lightness (sometimes referred to as value or lightness) can be thought of as the amount of white or black present in a color. The bottom of the cylinder is completely black, and the top is completely white. In between, white and black are added to the slices of color. In the exact center of an HSL volume, the color is completely desaturated and perfectly between black and white, producing a middle grey. In a similar representation known as HSV, lightness is replaced with value, which we covered in a previous chapter. The bottom of an HSV cylinder is black and the top is pure color, or the absence of black, rather than having white added. In an HSV cylinder, the center of the very top “slice” is the only place where pure white is present. It should also be noted here that HSL and HSV have different goals as color models, and one isn’t necessarily superior to the other.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

13 comments on “Art and the Web: Color

  1. This is incredibly well written Nick thanks. Have been waiting a long time for an article like this.

    Would love to see the thought process you give before choosing a palette in a follow up.

  2. This is incredibly well written Nick thanks. Have been waiting a long time for an article like this.

    Would love to see the thought process you give before choosing a palette in a follow up.

  3. Color is one of those subject which you could spend hours reading about, even days. 

    This article is a great quick overview of the subject. It tells you everything you need to know. 

  4. Color is one of those subject which you could spend hours reading about, even days. 

    This article is a great quick overview of the subject. It tells you everything you need to know. 

  5. Colour is such an awesome & interesting topic, but few article I’ve read (ever) have been as nice as this, thank you Nick, bookmarked for future reference!

  6. Simple and small article about colors. Just the way I like. Simple things are the best one. Thanks.

  7. Simple and small article about colors. Just the way I like. Simple things are the best one. Thanks.

  8. Actually Nick I think this title ‘Art and the web’ is misleading, your article concerns the science of colour and it looks like it’s aimed at designers. It’s more like a guide to the terminology of Photoshop and the like. I think anyone looking for ‘art the the web’ might be expecting content about contemporary online art.

  9. Actually Nick I think this title ‘Art and the web’ is misleading, your article concerns the science of colour and it looks like it’s aimed at designers. It’s more like a guide to the terminology of Photoshop and the like. I think anyone looking for ‘art the the web’ might be expecting content about contemporary online art.