Color Properties & Perception

We are able to see color because of photoreceptors in our eyes. There are two types of receptors involved in sight:

• Rods work at very low levels of light. We use these for night vision because even a few bits of light can activate them. Rods don't help with color vision, which is why we see everything in shades of gray at night. Animals that see well in the dark have many more rods than humans.

• Cones need a lot more light, and they can see color. We have 3 types of cones: blue, green, and red. The brain integrates the signals sent from these cones to allow us to see millions of colors. For example, we see yellow when green and red cones are stimulated, but the blue cones aren't. When all the cones are stimulated equally, the brain perceives the color as white.^[2]

The light spectrum is like a rainbow that shows all the colors of light. Each color in the rainbow has a different wavelength, which is like how stretched out or squished together the waves of light are. The wavelength determines the color we see—longer wavelengths make us see red, while shorter wavelengths make us see blue or violet. Violet light and blue light have the shortest wavelengths, while red has the longest visible wavelength of 635-700nm.^[3]

Designers can use this knowledge to create color combinations that are visually appealing and communicate the right mood or message. For example, colors with longer wavelengths, like red and orange, are often seen as warm and energetic, while colors with shorter wavelengths, like blue and violet, are perceived as calm and cool. By understanding how wavelengths affect color perception, designers can choose colors that enhance the user experience and evoke the desired emotional response.

Isaac Newton was the first to organize colors into what we now call an additive color wheel. It's called "additive" because when you combine the colors of light from the wheel, they create pure white light.

There are other color systems too, like the RYB system used by artists for painting and the CMYK system used in printing. In this lesson, we'll focus on the RGB color system, which is used for digital displays. This system is how cameras, TVs, and computer screens show colors. It's also how our eyes perceive color.

In the RGB system, screens use light to create colors by mixing red, green, and blue light at different levels, a process known as additive mixing. All colors start as black, meaning no light is shown. By adding red, green, and blue light, the screen creates various colors, adjusting the intensity of each color to produce different shades. When these three colors are combined at equal intensity, they create pure white light.

A hue is another word for color, like red, blue, green, or yellow. When we talk about hues, we're talking about the purest form of a color without adding any black, white, or gray to change it.

A hue is determined by the dominant wavelength of light that we see. For example, when we see red, the light hitting our eyes has a dominant wavelength that makes us perceive it as red.

Even though we say a hue is a single wavelength, it doesn't mean other wavelengths aren't there. Blue isn't just blue because other wavelengths are gone. Each hue contains all the wavelengths of visible light, but one particular wavelength stands out and makes the color appear distinct to us. This dominant wavelength is what gives each hue its unique identity.

Chroma is the measure of color's purity, intensity, or saturation. It describes how vivid or dull a color appears. High-chroma colors are at their most vivid and pure state, meaning they're as intense as they can get without any alterations.

You can decrease the intensity of a hue by adding gray, which reduces its chroma and makes the color less vivid. As you add more gray, the color becomes duller. Eventually, if you keep adding gray, the color will lose all of its intensity and become pure gray. This happens at 0% saturation, where the hue no longer shows its original color.

Another way to reduce chroma is by adding a hue’s complementary color. For example, red and cyan are complementary colors. If you add cyan to red, the red becomes less intense and grayer. When you mix equal amounts of red and cyan, they cancel each other out, leaving no trace of either color. Instead, you get a neutral gray.

Value refers to how light or dark a color is. It shows where a color stands between white and black. White is the color with the highest value and black is the color with the lowest value. For any color, increasing its value makes it look lighter, while decreasing its value makes it look darker. However, different colors have different perceived lightness because of the difference in wavelengths. For example, a fully saturated yellow will always look lighter than a fully saturated blue.

Keep in mind that value only describes the visual lightness of a color, not the method used to change it, such as adding white or black.

A tint is created by adding white to a color. This increases the color’s value and reduces its saturation. As white is added, the color becomes lighter and less intense, such as red turning into pink or blue turning into a light blue. Tints are useful when you want an element to feel softer or less dominant. In interfaces, they are often used for secondary backgrounds, inactive states, or supporting content that should not compete for attention.

A shade is created by adding black to a color, which lowers its value and makes it darker. As more black is added, the color becomes deeper while still retaining its original hue, such as red becoming maroon. Shades are useful when you need stronger contrast, depth, or emphasis. In UI design, they are often used for text, borders, or elements that need to stand out clearly.

Tones are created by mixing a pure color (hue) with gray, which decreases the color’s intensity and gives it a more muted appearance. This process is called desaturation.

Tones are often softer and less vibrant than the original color, making them useful for adding subtlety and depth to designs. When you adjust the amount of gray added to a hue, you create different tones that can vary from slightly muted to significantly softened.

In design and branding, tones are valuable for creating variation without straying too far from a color scheme. They allow you to maintain consistency while adding interest and balance.

Primary colors are the building blocks of all other colors. In the RGB additive color model, the primary colors are red, green, and blue. When mixed in different amounts, these colors create a wide range of hues, including white when combined equally at full intensity.

These colors are called "primary" because they cannot be created by mixing any other colors together. Instead, they are used to create all other colors when combined in different ways. For example, mixing red and blue makes purple, red and green make yellow, and green and blue make cyan.

In the RGB color model, secondary colors are created by mixing any two primary colors out of red, green, and blue. The secondary colors in this model are cyan, magenta, and yellow. Here's how they are formed:

• Cyan: Made by mixing green and blue
• Magenta: Made by mixing red and blue
• Yellow: Made by mixing red and green

Secondary colors in the RGB model are essential for creating the full spectrum of colors you see on digital devices. They play a crucial role in designing images, graphics, and videos because they help achieve more vibrant and accurate color representations.

In the RGB color model, tertiary colors are created by mixing a primary color (red, green, or blue) with a secondary color (yellow, cyan, or magenta). This process results in a more nuanced and diverse color palette, which is crucial for digital design.

Tertiary colors include hues like:

• Amber, a warm, golden color created by mixing red and yellow, which gives a reddish-orange hue
• Vermilion, a bright reddish-orange color achieved by combining more red with yellow
• Chartreuse, a vibrant yellow-green color made by mixing yellow and green
• Spring green is a fresh, bright green color created by mixing green and cyan

These colors offer subtle variations that enhance the richness and depth of digital visuals.

Perceived color temperature refers to how warm or cool a color appears to us, which influences our emotions and perceptions. Colors are generally categorized as warm or cool based on their appearance.

Colors with longer wavelengths, like red, orange, and yellow, are perceived as warmer. On the other hand, colors with shorter wavelengths, like blue, green, and purple, are perceived as cooler.