Introduction to Color Theory for Games, Art and Tech

  1. Part 1: Color as Light and Eye Receptors Activation
  2. Part 2: Perceptual Color and Color Spaces
  3. Part 3: Colors in Composition

Why Should You Learn About Colors?

Understanding color and learning to use it well is like having a super power. It gives you the ability to communicate with others on an emotional level, while it also helps you to visually package your images with higher clarity and readability.

Introduction to Color, a Simple Yet Complicated Topic

On paper, color seems to be very simple. You have your Hues (red, green, blue etc.), saturation (the intensity/ richness of color) and value (how light and dark the color is). You can mix colors to create new ones, both by combining pigments as well as overlapping lights. Objects have colors because they reflect them, lights have colors because they emit them. Our eyes get hit by these reflected and emitted rays and an image is formed in our mind, like a camera.

Part 1: Color as Light and Eye Receptors Activation

Colors as Electromagnetic Waves

Light sources emit rays, these rays are reflected by objects and bounce around the space. Turns out these rays are actually waves with different wavelengths. We use the term “colors” for some of these waves. Below is a diagram you have probably seen a few times already.

Figure -1- Electromagnetic spectrum
Figure -2- The white light here consists of many different wavelengths, which you can separate using a glass prism
Figure -3- Different reactions on light hitting a surface. Typically the diffuse lighting comes out very close to where light went in, so we usually assume the origin of the reflected diffuse light is on the contact point, this is not exactly correct, specially for materials with higher light penetration which lead to more visible subsurface scattering
Figure -4- As light travels through a medium, some wavelengths get absorbed at specific rates
Figure -5- Painterly attempt at imitating blue sphere lit by red light without reference
Figure -6- Rendered pure blue sphere under pure red light
Figure -7- A more typical case in nature, a impure red light and a material that doesn’t absorb all lights except blues

Color Defined Through Activation Strength of Our Light Sensors

How do we see? That is a rather complicated question. I will try my best to give the simplest explanation possible.

Figure -8- How much each sensor (types S, M and L) gets activated by different wavelengths.
Figure -9- RGB light and many different wavelengths combination will look the same to our eyes
Figure -10- The Color wheel

Part 2: Perceptual Color and Color Spaces

Perceptual Color

The color our eyes see is not actually the color we end up seeing in our mind. There is a post processing of a sort that happens in our brain, you can think of it as a combination of tone mapping and color grading:

Figure -11- no cool color is actually used in this painting, the sky and the sea are painted with desaturated yellows. By Thomas Moran, Temple of Venus

Color Mixing and Color Spaces

A color space is a certain arrangement of colors in a system where each color relates to one another through a set of basis (axes).

Figure -13- Color Spaces
Figure -14- Quiller Wheel, from “Color Choices”

Part 3: Colors in Composition

When we talk about good composition, we usually mean an arrangement of visual elements which communicates a subject matter; creates an emotional charge which supports the core message and lastly looks visually interesting and intriguing. There is ALOT packed in the above sentence, which I will cover more in depth in a future post “Introduction to Art Direction for Games”. The focus in this post is the role color plays in creating such image.

  1. What do you wish to convey with this image? What is it that you are actually making? For who? To what propose? Build a hierarchy of importance in your answer: the main point in this image or scene is A, second place is B, third C.
  2. What is the emotional charge of the message? How do you want the viewer to feel as they consume this image.

Readability

Readability is in my opinion the most crucial aspect of a good composition. Regardless of how fantastic your concept is, it is hard to justify its validity when your target audience doesn’t understand it. Color can aid you greatly in effectively communicating the point of an image.

Figure -14- Color can help you communicate through affinity and contrast
Figure -15- Poor choice of color can make for bad communicate by adding noise
Figure -16- Low contrast leads to poor visibility. It worsens the communication by weakening the signal

Color Harmony

Most texts on color theory have color harmony as one of main areas of focus. I will cover this very briefly. This is not because color harmony is unimportant, but because color harmony has been covered very well by others (look at further readings section) and I think it is actually quite a simple topic that doesn’t need too much discussion around it.

Figure -17- A color script from Coco Pixar, from “The Art of Pixar”. Pay attention to how constrained each scene is, with very few colors and how the colors of the scenes relate with each other sequentially
Figure -18- Popular schemes for picking harmonious colors

Shaping Emotions With Colors

This is the most difficult part of picking colors, and the least documented part! Good colors make us feel things. Visual queues can remind us of a memory, a sensation or a situation (summer noon, autumn walk through a park, Christmas Eve, etc.). These trigger the emotions we associate with those memories.

Figure -19- Color DNAs
Figure -20- Mood boards

Visual Interest

At this point you should have a set of colors for your project which are readable, harmonic and generate an atmosphere/ emotional response which resonates with the message of your image.

Figure -21- local variation in colors

Conclusion and Further Reading

This became a longer post than intended. Still, I left many things out. Here are some resources where you can read more about the topics mentioned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store