Course Insights

Welcome to the new course on Color Theory! Let's have a look at what this course offers.

 About Color
 Color Wheel
 Color Parameters
 Combining Colors
 Color Systems
 Color Perception and Psychology

Introduction

Color is the first thing your eye recognizes whether it’s a piece of art, design, signage,
fashion or anything visual. It can communicate meanings without text and affect user
behaviors. It is essential to understand color theory and how to combine colors.

The Color of Light and Paint

The Color of Light

 All colors are mixtures of Red, Blue, and Green lights.

 Developed by Issac Newton.

The Color of Paint

 All colors are mixtures of Red, Blue, and Yellow pigments.

 Developed by Moses Harris.

Primary Colors

In a color system, the primary colors are those which cannot be produced by mixing other
colors.

In this course, we will follow the RYB color system that is most commonly used by
designers and artists. The primary colors are

 Red
 Yellow

 Blue

Secondary Colors

The secondary colors appear by combining two primary colors.

 Red + Blue gives Purple

 Blue + Yellow gives Green
  Red + Yellow gives Orange

Tertiary Colors

The tertiary colors come out by mixing two secondary colors.

 Red + Orange = Vermilion

 Orange + Yellow = Amber
 Green + Blue = Teal
 Blue + Purple = Violet
 Yellow + Green = Yellow-Green
 Purple + Red = Magenta

The Color Wheel

A color wheel is an arrangement of primary, secondary and tertiary colors in order. It

helps you to create meaningful color schemes for your designs.

The most common color wheel used by designers and artists is the RYB color wheel model
that consists of 12 colors.

Additive and Subtractive Colors

Colors can be blended by subtractive or additive processes.

Additive Process: The color is created adding light to a black background.

Subtractive Proces: The color is created blocking white light using pigments of dyes.

That’s why most monitors use RGB, and printers use CMYK.

Warm, Cool, and Neutral Colors

Colors are classified into three based on their temperatures.

Warm Colors: The half of color wheel that consist of red, orange, yellow that give an
impression of energy are called warm colors.

Cool Colors: The other half of color wheel which gives an impression of calm and soothing
are called cool colors.

Neutral Colors: Colors like black, white and gray are neutral colors.

Hue

The attribute that differentiates colors as red, yellow, blue, is called Hue. It defines pure colors in
terms of red, green or blue.
Saturation

The attribute that defines the intensity of the color is called saturation. The color will be bright if
the saturation is high.

Value

Value measures the variation among grays and refers to the darkness or lightness of a color. A
hue can vary in value to form different colors. A red can change in value and become light pink or
dark brown.

Chroma

Chroma defines purity of a color. It is the quality that embraces hue and saturation together.
A pure color has high chroma and a muted color has low chroma.

Tint

If you add white to an original real color, you get a tint and thereby it is lighter than the original
color.

Shade

If you add black to an original color, you get a shade and thereby it is darker than the original color.

Tones

Tones are created by adding gray to a pure hue. The addition of gray slightly darkens the original
color.

The color solid

The color solid represents the perceptual dimensions of color that show the relationship
between hue, saturation, and value.

Color Gradients

Color gradient or color progression denotes a range of position-dependent colors used to fill an
area. The colors generated by a gradient vary rapidly with position thereby producing smooth
transitions.

Types of Color Gradients

Linear: Colors are arranged in a straight line.

Radial: Colors are arranged in a circular pattern.

Angular: Colors that sweep around the starting point in a counterclockwise direction.
Reflected: The same linear gradient gets mirrored on either side of the starting point.

Diamond: Colors from middle to outer corners like that of a diamond pattern.

Color Contrast

Color contrast is the variance between two colors. In a color wheel, the colors directly opposite to
each other has the maximum contrast.

How to Combine Colors?

The colors should be combined in such a way that it creates harmony. This creates an inner
sense of order in the visual experience for the user.

The human brain is more comfortable with harmony, and it rejects anything that is over-
simulating or under-simulating.

There should be a dynamic equilibrium that lies between extreme unity and complexity.

Type of Color Schemes

These are the different color schemes that allow us to achieve harmony in your designs.

 Monochormatic
 Analogous
 Complementary
 Split-Complementary (Compound)
 Triadic
 Tetradic (Rectangle)
 Square
 Achromatic

Monochromatic Color Scheme

A monochromatic color scheme is made by choosing different tints, tones, and shades of one hue. It
is simple and mostly used in minimalistic designs.

Analogous Color Scheme

An analogous color scheme is made by choosing colors that are adjacent to each other on the color
wheel. These colors connect well and have a visual unity.
Complementary Color Scheme

A complementary color scheme is made by choosing colors that are directly opposite to each other
on the color wheel. These colors oppose each other and are used in designs that need a good
contrast.

Split-Complementary Color Scheme

If you like the complementary color scheme, but you feel it is too bold for your design project, you
may opt for a split-complementary color scheme. It is made by choosing a color and two shades on
either side of the opposite color.

Triadic Color Scheme

A triadic color scheme is made by choosing colors that are spaced evenly on the color wheel. These
colors create a sense of equality because of the use of equally spaced varying hues. It is always
better to use one hue as the dominant color while the other two as accents.

Tetradic (Rectangle) Color Scheme

A tetradic (rectangle) color scheme is made from two sets of complementary colors that are not evenly
spaced on the color wheel as shown. This will give you an equal number of warm and cool colors.

Square Color Scheme

A square color scheme is similar to the rectangle color scheme and is made from two sets of
complementary colors that are evenly spaced on the color wheel.

Achromatic Color Scheme

An achromatic color scheme only involves white black and gray colors. Designers mostly prefer a black
on the white color scheme but a white on black requires less energy and improves battery life.

Color Systems

You can touch a color that is part of an object. The white light falls on the object, it absorbs
all the colors and reflects back one particular color that we see.

There are colors that you can’t touch such as red laser beam or the colors. These two belong
to two different color systems.

RGB

The RGB color system is mostly used in monitors, mobile phones, and conventional
photography. In this color system, code text here Red, Green, and Blue combine to form
all the other colors. Each color is represented as an integer between 0 and 255.

 Red = RGB (0,0,255)

  Green = RGB (0,255,0)
 Blue = RGB (0,0,255)
 Black = RGB (0,0,0)
 White = RGB (255,255,255)

CMYK

CMYK color system is mostly used in print industry. In this system cyan, magenta,
yellow and black are the primary colors. The value of each varies from 0% to 100%.

 Cyan = CMYK (100,0,0,0)

 Magenta = CMYK (0,100,0,0)
 Yellow = CMYK (0,0,100,0)
 Key Black = CMYK (0,0,0,100)

HEX

In this color system, the colors are represented in hexadecimal values. It is mostly used in
web-design.

The colors are represented as #RRGGBB where R=Red, G=Green, and B=Blue. The value of
each is hexadecimal values that vary from 00 to FF.

 Red = #ff0000
 Green = #00ff00
 Blue = #0000ff
 Black = #000000
 White = #ffffff

HSL

HSL color system deals with Hue, Saturation, and Lightness. It is represented as HSL
(Hue, Saturation, Lightness).

Hue varies from 0 to 360. 0 = Red, 120 = Green, 240 = Blue.

Saturation varies from 0 to 100 where the shade of gray decreases in intensity.

0 = Shade of Gray, 100 = Pure Color.

Lightness also varies from 0 to 100. 0 = Black, 100 = White.

PANTONE
PANTONE is a standardized color system. It has a well-defined set of colors and
allows designers to match the colors irrespective of the equipment used for the color
production.

By a using PANTONE chart, people across the globe can use the same color irrespective of
geographical location.

Colour Perception

How Do the Eyes See Color?

White light consists of all the colors. When the white light falls on an object, it absorbs all the
colors and reflects back one particular color that we see. This reflected light is sensed by rod
and cone cells in the eye.

Color Blindness

Color blindness is the decreased ability to notice color or distinguish between colors.
Fundamentally there are three types of color blindness:

 Deuteranopia: Inability to recognize green color.

 Protanopia: Inability to recognize red color.
 Tritanopia: Inability to recognize blue/yellow color(s).

Color Psychology

What is Color Psychology?

Color Psychology deals with the impact that color have on human behavior. In reality, color
can give people special feelings, and distinct colors make people respond in a particular way.

For instance, the colors green and red are regarded high for conversions, when they are
employed in call-to-action buttons. Although the impact of color is very subjective, there are
a few generalities on people’s behavior to color.

Color Meanings and Emotions

A few generalized meaning of color and the emotions associated with it are enclosed below.

 Red: Love, Passion, Energy, Heat, Anger, Danger, and Warning.

 Green: Environment, Healing, Earth, Envy, Jealousy, and Guilt.
 Blue: Security, Integrity, Trust, Security, Coldness, and Fear.
 Yellow: Happy, Bright, Sunny, Irresponsible, and Unstable.
 Orange: Courage, Confidence, Success, Ignorance, and Sluggishness.

Color Meanings and Emotions

  Purple: Royalty, Nobility, Luxury, Mystery, and Moodiness.
 Pink: Sweet Compassion, Happy, Weak, and Immaturity.
 Brown: Earth, Outdoors, Conservative, and Dogmatic.
 White: Goodness, Innocence, Isolation, Pristine, and Emptiness.
 Black: Protection, Elegance, Dramatic, Death, Evil, and Mystery.

Color Symbolism

Color Symbolism Color is often referred as a symbol and varies the meaning across cultures.
Few colors and their symbolism in various cultures are listed below.

 Red: Love (Western), Mourning (South Africa), Communism (Russia), and

Celebration (China).
 Yellow: Jealousy (France), Wealth (Africa), Courage (Japan), and Luck (Thailand).
 Blue: Trust (Western), Hope (Latin America), and Divinity (Israel).

Brand Color

The color and brand are closely related. The emotional aspect of color affects how a user
feels when they look at a brand, and the practical aspect helps the brand to stand out from rest
of them. Users make most of its brand and product judgments based on its color.

Color Coordination and Conversion

Color plays a significant role in UI Design when it comes to conversion rate. The usage of a
red button over green button increased the conversion rate by 34%.

Course Summary: Color Theory

By now, hope you have a good understanding of the various aspects of Color Theory such as

 Color of Light & Paint.

 Color Wheel
 Color Parameters
 Combining Colors
 Color Systems
 Color Perception and Psychology