Color Properties & Perception

app.uxcel.com/courses/color-psychology-for-designers/color-properties--perception-517

October 5, 2021

The human eye, second only to the brain in complexity, contains specialized receptors that
detect specific wavelengths of light, enabling us to perceive up to 10 million distinct colors.[1]
Understanding the properties of color—such as hue, saturation, and brightness—unlocks the
ability to recognize subtle variations that might otherwise go unnoticed. Mastering these
properties not only sharpens color perception but also enhances the ability to create
harmonious and visually appealing designs for any project.

Exercise #1

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.

1/13
 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]

Exercise #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.

Exercise #3

2/13
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.

Exercise #4

3/13
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.

Exercise #5

4/13
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.

Exercise #6

5/13
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.

Exercise #7

6/13
A tint is created when you add white to a color to lighten it. Tints are sometimes called pastel
colors. They can range from nearly the full saturation of the hue to white.

Tinting a color also desaturates the hue, making it less intense. For example, tinted red
becomes pink, and tinted blue becomes baby blue. Desaturated colors deemphasize content
and can be used to guide users to focus on another area of the design.

Exercise #8

7/13
Adding black to a color makes it darker, creating shades. For example, adding black to red
gives you a deeper maroon.

You can add varying amounts of black to any hue to create shades of that hue. They can
range from a slightly darker version of the original color to a deep, nearly black tone that still
retains some of the original hue.

Shades are used to add depth and contrast to designs, paintings, and drawings. They can
create shadows, emphasize certain areas, or convey different moods.

Exercise #9

8/13
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.

Exercise #10

9/13
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.

Exercise #11

10/13
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

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.

Exercise #12

11/13
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.

Exercise #13

12/13
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.

Complete this lesson and move one step closer to your course certificate

13/13