Color Theory for beginners
By: Arpit Batri
Tags: Ui Ux Design, UI Design, Color Theory, Visual Design, Colors

Color Theory for beginners

Color vs Colour?

Both spellings are correct. The shorter one, color, is the preferred spelling in the United States. The rest of the English-speaking world uses the longer form, color.

What is Colour?

Colour is a property that can communicate meanings without text and affect user behaviors. In context to light, all colors are mixtures of Red, Blue, and Green lights as derived by Issac Newton. On the other hand with respect to Paints, all colors are mixtures of Red, Blue, and Yellow pigments as derived by Moses Harris.

Types of Colours:

Basically, Colors can be divided into three types which are

Primary Colors: Red, Yellow, and Blue. In a color system, the primary colors are those which cannot be produced by mixing other colors.

Primary Colors

Secondary Colors: Purple, Green, and Orange. The secondary colors appear by combining two primary colors.

Red + Blue gives Purple

Blue + Yellow gives Green

Red + Yellow gives Orange

Secondary Colors

3. Tertiary Colors: Tertiary colors are also known as intermediate colors that are created by combining equal portions of a primary color with a secondary color next to it on the color wheel.

Red + Orange gives Vermilion

Orange + Yellow gives Amber

Green + Blue gives Teal

Blue + Purple gives Violet

Yellow + Green gives Yellow-Green

Purple + Red gives Magenta

Tertiary Colors

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.

Color Wheel

Classification of Colours:

Colors are classified into three based on their temperatures.

Warm Colors: Half of the color wheel that consists of red, orange, yellow that give an impression of energy are called warm colors.

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

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

Cool and Warm Colors

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 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 the color or distinguish between colors.

Fundamentally there are three types of color blindness:

Deuteranopia: Inability to recognize green color.

Inability to recognize green color. Protanopia: Inability to recognize red color.

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

What is Color Psychology?

Color Psychology deals with the impact that color has 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 toward color.

Color Meanings and Emotions

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

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

Love, Passion, Energy, Heat, Anger, Danger, and Warning. Green: Environment, Healing, Earth, Envy, Jealousy, and Guilt.

Environment, Healing, Earth, Envy, Jealousy, and Guilt. Blue: Security, Integrity, Trust, Coldness, and Fear.

Security, Integrity, Trust, Coldness, and Fear. Yellow: Happy, Bright, Sunny, Irresponsible, and Unstable.

Happy, Bright, Sunny, Irresponsible, and Unstable. Orange: Courage, Confidence, Success, Ignorance, and Sluggishness.

Courage, Confidence, Success, Ignorance, and Sluggishness. Purple: Royalty, Nobility, Luxury, Mystery, and Moodiness.

Royalty, Nobility, Luxury, Mystery, and Moodiness. Pink: Sweet Compassion, Happy, Weak, and Immaturity.

Sweet Compassion, Happy, Weak, and Immaturity. Brown: Earth, Outdoors, Conservative, and Dogmatic.

Earth, Outdoors, Conservative, and Dogmatic. White: Goodness, Innocence, Isolation, Pristine, and Emptiness.

Goodness, Innocence, Isolation, Pristine, and Emptiness. Black: Protection, Elegance, Dramatic, Death, Evil, and Mystery.

Color Symbolism

Color Symbolism Color is often referred to 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).

Love (Western), Mourning (South Africa), Communism (Russia), and Celebration (China). Yellow: Jealousy (France), Wealth (Africa), Courage (Japan), and Luck (Thailand).

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 the rest of them. Users make most of their brand and product judgments based on their color.

Color Psychology used in branding.

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 the green button increased the conversion rate by 34%.