HOME
 HTML
 CSS
 PHP
 PHOTOSHOP
 WEB DESIGN
 SITE INFO
Web Design
INTRODUCTION
 CONSISTENCY
 COLOR THEORY

Color Theory

Introduction

A web site needs several things to pull it together - a good layout, interesting content, interactive components to keep the viewer interested - but few people will have respect for a web site that does not have an aesthetic design. Good colors, along with a good layout, are pleasing to look at and keep a visitor interested for a longer amount of time.

Picking colors that go together may be a little harder, though. Sorry, but neon lime green does not exactly go well with dark purple, and baby pink and bright red often do not look good together. Color theory is mostly common sense, as in the preceding cases, but picking a range of colors can sometimes be difficult.

The Science of Color

There are three primary colors - red, yellow and blue. Combinations of these three colors produce three secondary colors: purple (red and blue), green (blue and yellow) and orange (yellow and red). Further mixing of these colors can produce a whole range of tertiary colors from which to design components of your site. Usually, these colors are arranged in what is known as a color wheel:

To get complimentary colors that accent each other and make your site more interesting, all you have to do is study the color wheel and choose colors opposite from one another. For example, red purple is the compliment of yellow green, and orange red is the compliment of blue green.

Colors can vary in tone or hue. Hue is the difference in colors themselves (green versus blue), while tone is the degree of color (dark to light).

There are also the monochromatic colors of white and black. White and black can decrease or increase the shade, or richness of color, that you choose - in other words, adding white makes colors lighter and adding black makes colors darker. Making colors lighter with white is known as creating variations in tint, while making colors darker with black is known as creating different shades.

Making Good Color Combinations

There are several different ways to make a color palette for your site - you can use a base image, color or even combination of colors to put together a creative and eye-catching set.

Monochromatic - Here, monochromatic means exactly what it sounds - one color. By picking different shades of the same color, you can highlight different areas of your site and focus on your material instead of your design.

Analogous - Choosing colors next to one another on the color wheel can give your website flow, harmony and a theme. Colors like red, orange and yellow usually give a warm, sometimes even bold feeling to your site, while colors like blue, green and darker purples are cooling and refreshing. Baby blues and pinks are also often more feminine colors compared to dark shades of brown or green.

Color Picking - Programs like Adobe Photoshop also give you the ability to pick out colors from an image. Color picking from a single image can automatically give you colors from all over the color wheel that work together to make your site look good without making it drab, bringing out your design as well as content. However, you do need an image to start with, which can sometimes be difficult to find.

Sources / For More Information

<< Prev | Next >>