Color Theory: The Main Principles

By 1stwebdesigner.com

Learning to combine colors

The people, who are not closely familiar with the web design main principles, choose colors for their websites according to their own taste and end up with the colors that just look good in combination with each other. It is great if you have a good eye and you feel intuitively what color scheme to choose for a website. But of course, all men can’t be good at it. So, for all those who are not sure what colors to combine for the website, I would recommend to learn the basics of color theory – it is very clear and easy to understand.

One of the most useful issues to start with is the Color Wheel.

A little bit of history: The color wheel was invented by Isaak Newton in 1666. He took the bar of colors created by the passage of light through a prism and transformed it into a segmented circle, where the size of each segment differed according to his calculations of its wavelength and of its corresponding width in the spectrum.

Source: sustland.umn.edu

The color wheel is an indispensable attribute of many designers and artists all over the world. This great tool is a perfect proof of the theory that the ingenious is always simple. The color wheel allows you to pick the colors that are harmonious together. The wheel consists of 6 basic colors: red, orange, yellow, green, blue and purple. In addition to the basic colors, we have extra colors (mixes of the basic).

So, to find a right harmonious color scheme, you need to use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle or any of four colors that form a rectangle (two pairs of colors opposite each other). Color schemes remain harmonious regardless of the rotation angle.

Primary Colors

There are three primary colors: Red (#ff0000 in HTML or #f00 in CSS), Yellow (#ffff00 in HTML or #ff0 in CSS) and Blue (#0000ff in HTML or #00f in CSS). We cannot get them by mixing any other color. The other extra colors can be formed by combining of these three colors. If you mix two of the primary colors, you will have a secondary color.

Secondary colors

There are also three of them: Orange (#ff9900 in HTML or #f90 in CSS), Green (#00ff00 in HTML or #0f0 in CSS) and Purple (#ff00ff in HTML or #f0f in CSS). You can get them by mixing red and yellow (orange), yellow and blue (green) and blue and red (purple).

Tertiary colors

To get one of tertiary colors you need to mix one primary color and one secondary color together. The opportunities for tertiary colors are endless.

Complementary colors

Complementary colors are the ones that are located directly across each other on the color wheel: red and green, blue and orange, purple and yellow. In combination with each other they compose a striking contrast. Such color combinations are usually used for standing out some elements on the website. For example, if you have an orange background and some blue elements on it, the blue items will be almost blinding.

Analogous colors

These colors are located next to each other on the color wheel. They usually look extremely good together, but absolutely quiet. Use such color combinations when you need your visitors to feel comfortable while looking at your website pages.

There are plenty of color groups that refer to various aspects of color, i.e. warm colors, cool colors, neutral colors to name a few.