HTML, XHTML, CSS and Web Design Resources

Using Color Harmoniously on Your Web Site

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.

This is a nice one. You can also use the standard calculators on Windows or Macintosh computers:
How to on Macintosh
How to on Windows

• Red #ff0000
• Green #00ff00
• Blue #0000ff
• White #ffffff
• Black #000000

Combine your three RGB numbers into a six digit hexadecimal number preceded by a pound-sign (#).

What Items Can You Color?

In Web design, nearly everything has a color from the images you post on the page to the background of the page to the actual text on the page. But for the purposes of this article, we’re going to talk about two primary items:

• text - the color of the letters
• backgrounds

It’s easy to change the color of text, simply use the style property, color:
color : #ffcc66;
More on the color property.

Backgrounds are just as easy with the style property background-color:
background-color : #ffcc66;
More on the background-color property.

But backgrounds are tricky because you must ask “The background of what?”. There are many things you can change the background color to, such as:

• change the text color background:
  Use the style property on a span, div, or p element.
• change a table background:
  Use the style property on a td, th, tr, or table element.
• change the entire page’s background:
  Use the style property on the body element.

Using color is vital for Web pages. And these hints and instructions should help you to use color as effectively as possible.

see more…

Color on the Web

Color by Number

When you write valid XHTML colors you have to use a code called a hexadecimal code or hexadecimal triplet. This means:

• triplet
  Each color is defined as the amount of saturation in three color chanels:
  • Red (R)
  • Green (G)
  • Blue (B)

RGB color channels have a saturation ranging from 0 (no saturation) through 255 (fully saturated). So, to define a color using RGB, you indicate how much saturation in each of the color channels, for example:

• Red (255,0,0)
• Green (0,255,0)
• Blue (0,0,255)
• White (255,255,255)
• Black (0,0,0)

• hexadecimal
  Once you have figured out the RGB values of the color you would like to use, you need to convert it to base 16 or hexadecimal.

The easiest way to convert an RGB value to hexadecimal is to use a program.

see more… 

Using Short Versions of Color Codes in CSS

Once you’ve started using CSS layouts for your Web designs, you may notice something odd about the way the colors are defined. Rather than the standard 6-character long code after the pound sign (#cc99ff), instead you see just three characters (#c9f). This is called color shorthand and it takes advantage of the fact that the browser-safe Web palette uses triplets that are always doubled. In other words, each color triplet is made of 3 pairs of characters 0-f (base 16), and with browser-safe colors they are doubled. So, to write color shorthand, you simply remove the duplicate character.

For example:

• White is written
  

  #fff

• Black is written
  

  #000

• Red is
  

  #f00

• Green is
  

  #0f0

• Blue is
  

  #00f

and so on…

by About.com/ 

So What Can You Do to Synchronize Your Web Colors?

Short of only displaying your Web site on a kiosk where you control the monitor, operating system, and browser, there isn’t a lot you can do to keep your pages looking as you intended. But there are a few things you can do to minimize the problem.

1. Keep it simple. Use simple colors.
   For instance, you might love the color #b9cafe (a light bluish purple on my monitor). But this isn’t a simple color - it’s hexadecimal triplet is very complex. Simple colors use duplicated numbers for the triplets - for example a simplified color that is close is #bbccff.
2. Keep it simple. Use very few colors.
   It can be tempting to fill up your page with a 3-5 colors or more, but even if they are all the same hue, the more colors you have on a page, the more likely that they will look wrong in some situations.
3. Keep using browser safe colors where you can.
   The browser safe palette is a limited palette, but it has wider support than not. Most monitors can display #f00 more easily than #f11, even though both reds are very close in color.
4. Don’t sweat it.
   The bottom line is that you won’t be able to make your Web pages look identical in all situations. The best thing to do is make sure the colors work for your customers on their monitors or that your CEO likes your color choices. Then stop worrying about it.

see more…