DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Archit Sharma
Archit Sharma

Posted on

Color Theory for Web Design Beginners

In this article we are going to learn about colors
If you ever did the design work before than you are already familiar with basics of Color theory
So lets go all the way back to our elementary school where we were learning about the colors

Lets start with three main categories of colors
Types:

  1. Primary Colors
  2. Secondary Colors
  3. Tertiary Colors

Primary Colors

The Primary Colors are Red, Blue, Yellow. They are called Primary because you can not mix any other color to obtain them.
They are the building blocks from which all other colors are created.

Secondary Colors

The Secondary Colors are obtained by equally mixing Primary colors, so if we mix:
Red + Blue = Purple
Red + Yellow = Orange
Yellow + Blue = Green

Tertiary Colors

The Tertiary Colors are obtained by combining Primary and Secondary colors, so if we mix:
Blue + green = teal
Yellow + orange = amber
Red + Purple = magenta
Yellow + green = chartreuse
Blue + purple = violet
Red + orange = vermillion

Now you need to understand some key terms and I think best way to do that is by using a color picker in Figma.

Hue

Hue represents the dominant color in the color family, For ex: Pure Red, Pure Green, Pure Blue etc

Tint

A Tint is when you add white to a specific color which will give a lighter version of that color, For ex: Adding White color to Red will create a Tint.

Shade

A Shade is mixing a specific color with Black which will give us a darker version of that color. For ex: Adding Black color to Red will create a Shade.

Tone

A Tone is when you mix a pure color with grey so basically adding both black and white.

Saturation

Saturation is basically how rich and dull a color is

Thanks for Reading this article, this is enough as a beginner to get you started with Web Design.
Follow for more!

Top comments (0)

Stop by this week's meme thread!

Tech CEOs