The Basics of Colors

Learn everything about the basics of colors and use of colors!

Step 1

In the image below, you can see the color circle of Itten, a famous artist. This colorcircle shows perfectly how everything is set. In the middle you see a triangle with 3 colors. Those are the base-colors. Also called the primary colors. These colors cannot be created by mixing colors together. As you can see outside the triangle, there are smaller triangles holding on to 2 of the 3 primary colors. Those are called the Secondary Colors. As you can see, when you mix blue and yellow, you get green, etc. The outer ring is just filled with different variations of the colors you mixed. As you can see, all the colors in the outer ring "flow" into each other!

Step 2

When you design a logo or a website, you can't just use 1 color. You WILL have to use multiple colors. Of course that is all up to you, but there are certain contrasts you need to know of in order to achieve the desired emotion for the viewer. Below you can see 6 contrasts of each 2 colors. The first 3 contrasts are complimentary. That means the colors are the opposite of each other. If you look at the color circle, you can see that the opposite of yellow is purple, the opposite of green is red, etc... These combinations are used very often. Red-Green with christmas and Yellow-Purple for certain text in Nex-Games, for example.

Below the 3 contrasts, is the 4th contrast, which is a warm-cold-contrast. Warm colors like orange and read, featuring cold colors like blue, gray and white. These also work very nice! And at the bottom, you can see 2 examples of the Light-Dark-Contrast where you just take lighter and/or darker colors of a specific color in a layout. That way you can still use 1 desired color in a layout, yet you make it more playful!

Step 3

Below you can see how many difference black and white can make on gradients. Below you can see I used my favorite color green 2 times, YET, I added a white color on the top image and I added a black color on the bottom image. You can see the entire gradient changes. Therefore, choose your gradient wisely my padawan! That's all for now. I hope you learned something. I'm not gonna go even deeper into the basic, because I figured you had to learn that in Kindergarten!