Archit Sharma

Posted on

# Color Theory for Web Design Beginners

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

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.

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.