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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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 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.
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
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.
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 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 (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.