Color Specification
Over the last four issues I have been discussing the use of
color on your web site. The topics have ranged from the
technical aspects of how we "see" color to the emotional
aspects of how we "perceive" color. These topics are all
posted on-line at:
issue52top1
issue53top1
issue54top1
issue55top1
In this final article on color I will discuss some of the
more fundamental aspects of using color on your web site. How
do you specify color, what elements can you assign color to,
which tags do you use?
A couple of weeks ago I posted an example of the Web Safe
Color Table at: colorsafetable If you look at the table you will
notice that each cell includes a different designation. These are
hex codes and are 1 of the two methods by which color can be
specified. The other being color names such as "Black", "Red" and
so on.
A color HEX code specifies a color by using three Base 16
values to define Red, Green and Blue color combinations.
Essentially, it is one of those wonderfully non-intuitive
methods that it would seem that technically minded people
have developed just to confuse the non technical population
as much as possible. As if mixing Red, Green and Blue is not
difficult enough you have to use Base 16 to do it.
Fortunately, it is not as difficult as it may at first appear
(I hope). If you are an artist, the more difficult component
is mixing Red, Green and Blue. This is because the primary
colors that most artists are familiar with are Red, Yellow
and Blue. I discussed this in the first article at: issue52top1. The
thing to remember is that in an RGB system colors are additive.
You mix Red and Green to make Yellow, Red and Blue to make
Purple and Green and Blue to make Cyan (turquise). Increasing
the RGB values will make the color lighter until they become
white. Decreasing values are darker until they become black.
With a little practice, it is fairly easy to visualize
approximately the color you should get as you mix the values
together.
A base 16 Hex value may scare those of you that had little
appreciation for grade 10 math but it should also be
relatively easy to understand. The values for the HEX codes
are: 0 1 2 3 4 5 6 7 8 9 A B C D E F. A is equivalent to 10,
B = 11, C = 12, D = 13, E = 14 and F = 15. By combining these
into 2 digit combinations, 256 color intensities can be
created from 00 at the darkest to FF at the brightest.
Combine the intensities for Red, Green and Blue and you will
have a 6 digit HEX code. Since black is 0 intensity the HEX
code would be #000000. White is represented by #FFFFFF. Red
is #FF0000, Green is #00FF00 and Blue is #0000FF.
In your HTML document, color is assigned with a 'Color'
keyword. The two possible ways to identify a color are with a
valid color name or with a hex code. To identify a HEX code,
you precede the value with a pound sign # and enclose it in
quotes. For example, the method to specify yellow as a
background is: BGCOLOR = "#FFFF00" while pale purple is:
BGCOLOR = "#FF66FF".
One of the greatest advantages with using a HEX value to
identify a color is that it is easy to specify a web-safe or
non-dithering color. This is because all the web-safe colors
use multiples of 33 for the RGB values. These values are: 00,
33, 66, CC and FF. If any of the RGB values are not one of
these 5 intensities, then you do not have a web Safe color.
Examples of web-safe colors are: "#FF33CC", "#000066" and
"#CCCC00". Examples of non web-safe colors are: "#0F0C36",
"#AA2255" and "#FF00C3".
As previously mentioned, the other method to specify color is
with a valid color name. There are 140 of these (that I am
aware of). The most obvious are easy to remember and use.
These include: Red, Black, Yellow, White and so on.
Unfortunately, the majority of names are created by combining
other names together. Remembering valid name combinations may
not be easy for many people. Examples that I find non-
intuitive are: Lightslategray, Mediumaquamarine and
Palevioletred. Not only am I not likely to remember what the
valid names are, I would probably tend to get the order
confused. An example would be using Paleredviolet instead of
Palevioletred. I don't even know some of these color. What is
Fuchsia for example and how is it different from Purple or
Magenta? Worse still, getting the spelling right is bound to
be a problem that my spell checker will not currently help me
with.
Another major problem with color names is that many of them
are not Web Safe. Beige for example is equivalent to a
"#F5F5DC" HEX code which you will note does not use values
that are multiples of 33. Even so, color names are fast and
accurate when a primary or secondary color is needed and can
be very useful when you wish to match a color name that you
are familiar with but cannot construct a HEX code for.
I have posted a list of the Color names at: colornames
Outside of bitmap images, there are numerous places colors
are used on a Web Page. These include backgrounds, text,
borders and links.
The BODY tag is used to specify the background color of the
web page as well as the three link colors. The format is:
\ VLINK="#ff0000"\>
BGCOLOR is the designation for the background color.
ALINK will set the color of an active text link.
LINK will set the text color of an unvisited link.
VLINK will set the text color of a previously visited link.
Another typical place color is used is when specifying table
borders and backgrounds. The format here is again the same.
\
\This table\\ illustrates several \examples of color specification\ \ \\ is56fig1 Assigning colors in a Table. Finally, the above example also illustrates how colors can be assigned to blocks of text using the Font tag. That's it for color. Hopefully you will have found some of the information new and informative. Next week .. ? Something new. ================================================ "IMS Web Tips" ISSN 1488-7088 © Copyright 2000 Virtual Mechanics ================================================ "IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites. To subscribe send an email to imswebtips@oaknetpub.com with SUBSCRIBE in the Body of your email or visit the IMS Web Tips home page for subscription information and a list of past articles. --------------------------------------------------------------------- If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details. 
|