Color Theory

Lesson Progress
0% Complete

For fun, let’s first check your Color IQ.

  • Hue: What you call the color’s name, like “red” or “teal”.
  • Chroma/saturation: The color’s purity or intensity.
  • Value: How dark/light the color is; the color’s luminance.
  • Gamut: The range of colors reproducible by mixing available primary colors. There is no combination of real-world-sourced primary colors (e.g. paint or light) that can produce a gamut as large as that perceivable by the human visual system.
  • Additive System: The combination of all three primary colors yields white. For example, on a computer display, red, green and blue light mix to white.
  • Subtractive System: The combination of all three primary colors yields black. For example, in print, cyan, magenta and yellow mix to black.

Good Color = Good Design

My favorite way to discuss good design is to start with this.

YOU determine colors’ meaning

Associating discrete connotative “values” to color is counterproductive in my opinion. Take the color red for example. We all know red symbolizes love and sensuality. And danger. And good luck, or a funeral color depending on where you’re from. It’s definitely important in filmmaking to set up the audience with intentional associations around a given color, but don’t expect them to all immediately feel the same specific thing when you use that color. There’s a bit of evidence that certain colors can trigger consistent physiological responses, but I advise against assigning inherent ‘meaning’ to colors.

Color Schemes

We can’t talk color theory without paying tribute to the various ‘color schemes’.

  • Complementary: Colors opposite each other on the color wheel.
  • Triadic: Colors equidistant on the color wheel.
  • Split Complementary: Colors adjacent to the complement.
  • Analogous: Colors next to each other on the color wheel.
Picture
http://mchsart.weebly.com/colorschemes.html

Once we start mixing primary colors together we get secondary colors, which combined yield tertiary colors. If you’re into traditional painting then look further into that, but there’s a reason I don’t explore it here. Go into Photoshop and mix red green and blue together. It’s an additive (RGB) system right? So it should yield white? I see far too many digital color classes going over these ‘foundational’ color concepts when they don’t apply to the way most software processes color.

I offer a similar caution on choosing “harmonious” colors for your color scheme based on these ‘rules’. Don’t be overly worried about choosing which colors “go together” based on abstract formulas or systems.

O’Connor’s Color Research and Application says it best with this formula:

Color harmony = f (Col1,2,3,…,n) • (ID+CE+CX+P+T)

Translation: Mix a variety of very personalized factors together (individual differences (ID) like age or gender; Cultural Experience (CE), Context (CX) which is your environment when seeing the color; Perceptual effects (P); and Time (social stigma of a given era could influence your interpretation of red for example). All of those factors combined with a given color (the first part of the formula) show us that positive reaction to color, or an interpretation of “good” color is a function of all of it. In short, you can’t quantify what makes good color so trust your own instinct and hope that it mirrors your demographic’s.

Here are two underutilized resources for applying some of these concepts of color theory:

Your own visual sense will tell you what looks right and wrong. Also remember that on a bigger shoot there’s a reason production designers and teams of visual people centralize around a color scheme. Without that work on the production side, your ability to do much in the color correction side is quite limited. So after all that, here’s my advice:

Limit your options. It’s a tried and true piece of design advice, and for a professional result, very often it’s less about which colors you pick, and more about being selective and consistent with a determined color palette.

All that said, let’s turn to some physiological reasons the idea of a complementary color palette can still be useful. Our eyes and brains are great adaptors. In discussing white balance, we learned that we can see a piece of paper as ‘white’ indoors under tungsten lighting as well as outdoors under daylight, even though the color of light hitting the white paper is drastically different. This compensatory function of our visual system lets us see relative color differences despite strong global color casts. But it sometimes works to our disadvantage when trying to color something. You might have the brilliant idea to color a moody scene blue to convey emotional depth in a character. In an effort to create a vivid blue, you might saturate the frame with strong blue hues. In a short space of time, the viewer’s brain will successfully remove the blue you’ve added by balancing that blue with it’s complement: a warmish yellow tone not at all similar to your creative intent. One way of keeping the blues vivid is to balance the blue with that yellow complementary color in the frame. The blue will be more vivid due to the presence of the yellow. You can slowly add a color cast to your scene so that when you reveal something of the complementary color it will look even more saturated due to the viewers’ eyes having compensated.

In short, using complementary colors against each other is a great way to create visual contrast, either within a single shot or between scenes.

Let’s take a look at some proof that your eyes are fooling you. First with the complementary color example: Stare at the ‘X’ in the center of the image for several seconds and notice how the circling magenta dot becomes cyan (magenta’s complement).

Let’s do another trippy test. Which square is lighter, A, or B?

If you answered ‘B’ you are correct. If you guessed that they’re the same it’s because you’ve done this before and you’re cheating. I modified the test in Photoshop to call out you cheaters. Here’s the real thing:

Is this gray bar the same color
Color optical illusion gray bar animated
There is no red in this photo.

Even more interesting, it’s not just the color of an image that changes, but actual shapes as well.

Another interesting resource on color perception.

The Human Visual System

Light reflects off objects and into our eyes. Light is simply electromagnetic radiation whose wavelengths will trigger different physiological and psychological processes in our visual system. Rod cells in our eyes sense luma information and cone cells sense color in long, medium and short wavelengths (red, green and blue accordingly). This high level explanation should be qualified by mentioning the fact that humans are very subjective and individually unique creatures. Age, gender and environment drastically affect our visual system. We lose our sense of color in low light. Generally speaking, we have a greater concentration of cone cells near the center of our retina so color reproduction is also drastically reduced at our visual periphery. Males tend to have a higher rod count and females a higher cone count. Also interesting is the effect of culture on physiology: In Russian, many more words exist for the color “blue” than we use in English. Due to this, Russians are physiologically more adapt at discerning shades of blue. So if you’re picking between strong candidates, hire the female Russian colorist.

Based on how we see color, it would make sense to develop a digital color system that “sees” similarly to our own biological one, right?

This is the genesis of everyone’s favorite CIE 1931 Chromaticity Chart. It’s basically a map of human color and gives us a way to quantify the perception of color with something objective. Any given color a human can see can be plotted to a specific point on this diagram.

Image result for 1931 chromaticity diagram"

The term ‘gamut’, covered earlier, is simply the range of colors that falls into what’s produceable from the three primary colors. There’s no tech capable of showing the extents of the CIE chromaticity chart so it’s much more efficient to work with smaller gamuts we call “color spaces”. Those three primaries are mapped to a specific location based on the color space you’re working with. Generally speaking, it doesn’t matter what color space you’re working in as long as every device in your digital chain is consistently using the same space. We’ll term those three values “tristimulus” primaries and discuss the “device independent” CIE XYZ gamut when we cover calibration.

  • Rec. 709: The “standard” video color space. This has been the most widely-used color space for broadcast video and remains the color space of choice for most video.
  • Rec. 2020: The replacement to Rec. 709. Nothing can really display this color space which we hope will make it somewhat futureproof.
  • DCI-P3: A standard gamut for digital cinema projection.
frame.io

The farther out the primaries get from white, the more code values we need to properly span that distance. This is where bit depth comes into play. Remember that your bit depth determines the number of available values/colors you have to work with.

  • All human-visible colors can be described in terms of X,Y and Z.
  • Colors of the same XYZ values can actually be different spectrally, but will appear identical to a human if those three values match.
  • Y is how we perceive luminance. Our eye is most sensitive to green.
  • 2.4 gamma actually matches fairly close to human perceived luminance.
  • Linear is an effects curve used for vfx, you normalize, not linearize a log curve.
  • 9-10 stops immediate dynamic range at one time, but 20 stops available because eye changes dynamically.
Scroll to Top