How Colors Work

Computers rely on three pieces of hardware to deliver the color information to you:

• The CPU (Central Processing Unit)
• A Video graphics card
• The computer monitor

The quality of color you see on your computer will depend on the type of these three pieces of hardware.

Also computer platforms and operating systems (OSs) have different capabilities when it comes to color. For example, Macintosh is know for its higher-end color, Windows 3.1 is usually limited, Windows 95/98/2000/XP have good color control and if you are using UNIX or UNIX type machine, you're at a disadvantage, with lower color capabilities. All these factors come together when someone visits your web site.

One of the most familiar is CMYK (Cyan, Magenta, Yellow, Black). CMYK is a method used for print output. In web design, indexed color is extremely important.

Color Depth

If you've ever shopped for video cards, you'll notice the measurements of 8-bit, 16-bit, and 24-bit color. These values refer to the number of bits of computer memory required to represent the different levels of color depth.

8-bit color depth will display 256 color. 16-bit color depth with display 65,536 colors and 24-bit will display 16,777,216 colors.

Elements of Color

Artiest and designers have been trained to understand and use elements of colour as a method to communicate. Web designers often do not come from design backgrounds, and don't have a full understanding of what colours can do, what they mean, and how to harness its power.

Categories of Color

Primaries: All colors are the result of some combination of three colors - Red, Yellow, and Blue. They are the first colors to technically exist. Without these three colors no other color is possible.

Secondaries: The next step is to mix pairs of the primaries together. If you mix pairs of the primaries together. If you mix red and yellow you come up with orange. Blue and yellow make green. Orange, and green are secondary colors.

Intermediates: When two or more primaries or secondaries are mixed together the results are referred to as intermediate color. These colors are gradations that lie between the primary and secondary colour.

Properties of Color

Color properties are determined by the type of amount of color as well as how much light is used in that color. Example:

Hue: This term is used to differentiate one color from another.

Value: Navy blue is darker then blue, forest green is darker then lime. A colors value is defined by the amount of light or dark in that color.

Saturation: Is the brightness of color. Peacock blue is very bright, whereas navy is rather dull.

Warmth: Hues found in the yellow-to-red range are considered to be warm.

Coolness: Cool colors are those ranging from green to blue. Think of ice blue or the cool sense of a forest a deep green can inspire.

Color Relationships

Colours are emotional, and they have an emotional relationships with other colors.

In designing your site, relationships are very important. If you are trying to create a peaceful environment, I'm not going to want to use bright red, I would want nice light and soft colors.

Special Color Effects

Color effects include the following:

Luster: This is the term used to describe a shining quality usually seen in fabrics such as satin or silk.

Iridescence: The inside of seashells, or pearls are iridescent. The color is usually some shade of gray.

Luminosity: Similar to luster and iridescence, the difference here is the quantity of contrast. Luminosity is created when there is very delicate contrast between the lighter areas and background areas.

Transparency: Think of a piece of tape or colored class. Light passes through, creating a clear or transparent effect.

Using Colour in HTML

There are two ways to specify colours in your web page. One is using Hexadecimal numbers and the other is using Colour names. We suggest using one that is most comfortable to you and sticking with it thru out your web site.

Hexadecimal Codes

Colours that are defined by a number is called hexadecimal. Hexadecimal codes can be tricky but some find easier to use. An example of hexadecimal colour code is:



Note: Make sure when you type of the code that you type a zero (0) and not the letter o.

We also suggest you try and use basic colors since there are people out there that cannot see all the color properly.

Color Names

There are over 100 defined colour names that are recognized by Netscape 3.0+ and Internet Explorer 3.0+. Other browsers may not see the colour correctly and can become spotty. An example of using colour names is:



Body Colours

Body colours are those that are set as the basic colours for your page. They will cover the text, links, visited links, activated links, and background. They are written together in the body tag.

An example:

<body bgcolor="blue" text="red" link="yellow" vlink="black" alink="cyan">

The bgcolor is the background colour, the text is text, link is links, vlink is visited links, and alink is activated links. And example of what this would look like is this:

This tag will go directly under your </head> tag. If you put it in the wrong spot or have more then one your page may not load correctly in some browsers.

Font Colors

You can control the way your text looks at any time within your page by using the font color tag: The tag will look like this:

<font color="colorname">colored text

You will want to make sure you end you text you wanted coloured with the </font> tag. If not everything from the first part will stay the same colour.

Table Colors

You can add a colored background to your table by added this tag:

<table bgcolor="color">

For example:

<table bgcolor="blue"> 

would make my table look like this:

To make just one cell a background colour use this tag:

<td bgcolor="colorname"> 

An example is this: