August's Crash Course

August's HTML Crash Course - Colour

So you don't want your sites to be black, white, and blue, huh? As you can see from this tutorial, neither do I. Let's dive right in to the deep ocean of... the web-safe colour palette.

The web-safe colour palette is a group of colours that you can more or less be guaranteed will be viewable by just about everybody. That means that the design that looks gorgeous on your machine will look gorgeous on mine [or at the very least won't make me run screaming as my retinas burn from the fuschia overload]. Now, I'm not going to list the entire palette here - I really don't have the patience to code two hundred and fifty-six colours and give examples of each. But there are other people who have, so when I put up a list of all the links I feel you folks might benefit from, I will link to those people who did that insane piece of coding. If nothing else, their patience deserves our respect.

What I will do, is tell you the system used to choose colours from the palette. It is a hexidecimal system, which means... something, I don't really know. But the way it works, is this: you can create colours by putting 6 characters together in a string, with a pound [#] sign in front of them. The characters you can use are [from least to greatest] 0 [zero], 3, 6, C, 9, and F. Sound confusing? Well, it'll seem pretty straightforward once you get used to it.

Suppose you want to change the background colour from white, to a nice soothing grey. You do that with an attribute in the BODY tag. The attribute is called BGCOLOR [remember, HTML started out in the U.S., so all the spelling is based on their system]. The code for making that happen would look like this:

Why is grey all "C"s? Well, the value "0" represents no colour whatsoever, and the value "F" represents as much colour as can possibly be shown. "C" is the halfway point. That makes all "F"s white [since we're dealing with light, and white is the presence of all colous], and all "0"s would be black [the complete absence of light]. You can mix and match, as long as you don't go over the 6 characters when choosing your colour. And I'll give you another little hint - the first two spots indicate the amount of red, the second two spots are the amount of green, and the third set of spots is the amount of blue. That means red would be #FF0000 and so on down the line.

The good news is that you can add colour to just about anything. The BODY tag also has an attribute called TEXT, which lets you set the default text colour for the entire document. And if you want to change the colour of specific chunks of text, then just insert a FONT tag with only the COLOR attribute. Tables, table cells, and table borders all have colour attributes of their own.

And I almost forgot. So do links. In the BODY tag, you can change the default colours for standard links, active links, and visited links. The attributes are pretty straight-forward. They are LINK, ALINK, and VLINK respectively.

That's about all I have to say on the subject of colour right now. On to the wonderful world of tables.

c: august@vestige.org h: http://www.vestige.org