Sunday, October 19, 2008

What is Color in Web Design?



What is Color in Web Design:
Color is a basic element of design, but what many designers don't realize is that it's not a required

element. Some of the best designs are done with only black and white or just a touch of one color.

Use of Color in Design:
Color in Web design can be used in many ways:

backgrounds
text and foregrounds
images
accents

How to Include Color in Web Designs:
Color is very easy to add to Web pages. There are many style properties that add color, including:

color - for foreground color, like fonts and text
background-color - does what it sounds like, changes the background color of the element
border-color - to change the color of borders around elements
You can also add color to your design through your images. JPEG images for photographs and images

with millions of colors and GIFs for flat color images.

When many people first start building their Web pages, they create pages in colors that they like. If you're lucky or have a good eye, you'll end up with colors that look nice together. But it's very easy to set up a color scheme that clashes and is difficult for your readers to view for long periods or at all.

Understanding color theory will help you to understand how color works on Web pages. And one of the first places to start learning color theory is with the color wheel. Sir Isaac Newton first put together a circular diagram of colors in 1666. This color wheel allows you to see groupings of colors that are harmonious together and other colors that might clash.

Primary Colors
The primary colors (represented in the related image) are RED, YELLOW, and BLUE. These colors, in traditional color theory, cannot be formed by mixing any other color. All other colors are derived by combinations of these colors. They are represented in HTML as:

Red: #ff0000 or #f00 in CSS
Yellow: #ffff00 or #ff0 in CSS
Blue: #0000ff or #00f in CSS
Secondary Colors
Secondary colors (represented in the related image) are ORANGE, GREEN, and PURPLE. These colors are the combination of red and yellow (orange), yellow and blue (green), and blue and red (purple). They are represented in HTML as:

Orange: #ff9900 or #f90 in CSS
Green: #00ff00 or #0f0 in CSS
Purple: #ff00ff or #f0f in CSS
Tertiary Colors
Tertiary colors (represented in the related image) are YELLOW-ORANGE, RED-ORANGE, RED-PURPLE, BLUE-PURPLE, BLUE-GREEN, and YELLOW-GREEN. These are the combinations of the secondary colors. They are represented in HTML as:

Yellow-Orange: #ffcc00 or #fc0 in CSS
Red-Orange: #ff6600 or #f60 in CSS
Red-Purple: #cc00cc or #c0c in CSS
Blue-Purple: #9900ff or #90f in CSS
Blue-Green: #00cccc or #0cc in CSS
Yellow-Green: #ccff00 or #cf0 in CSS
To put it all together, move on to the Color Harmony article.

No comments: