| Browser (Hexadecimal) Color
9/30/99
In web graphics, the definition of colors in the image are
a function of the raster editor that you use. Some allow you to use
the RGB model and specify your colors by red, green, and blue. Others may
use the HLS or CYM models for color specification. However, with bitmap
graphics included on web pages, there is no direct color definition in
the HTML file. The colors are defined in the image editor when you create
it. Therefore, all colors are inherent to the bitmap itself.
However, with text elements, backgrounds, and horizontal rules defined
by the HTML coding, you must work with something called hexadecimal color.
Hexadecimal color is a base 16 mathematical numbering system used to define
and describe HTML colors for the browser. Unless you have worked in some
area of computer programming in the past, it is likely that this will be
your first acquaintance with hexadecimal color.
As you will find, it is much easier to work with colors in a bitmap
editor than it is to work with colors in HTML coding. In a raster
editor, colors are defined by simply picking them with the mouse as described.
In HTML, however, you must mathematically define colors using abstract
letters and numbers such as FFFFFF for white or 000000 for black. We’ll
take a closer look at defining hexadecimal color a little later. Just realize
that it is easier to use a paint editor to create bitmaps than it is to
define hexadecimal colors in HTML code.
Hexadecimal Color
As we have discussed, creating colors in HTML code is much
more difficult that the visual point-and-click environment of most image
editors. To define colors in a web page you must use hexadecimal code (base
16) to define the colors; something that you probably didn’t even know
existed until you started designing web pages. Probably one of the least
favorite tasks of any web developer is dealing with hexadecimal color because
in the age of graphical user interfaces, it is not a natural way to work
graphically based ends.
All browser colors are defined using hex. Colored text, colored links,
colored outlines, anything that is not a graphic and that you want to be
a color on the web page must be defined using hexadecimal code. In reality,
hexadecimal code is nothing more than three, two number sequences that
represent our normal decimal numbering system. It sounds simple, but to
many it is a point of confusion. Really the only thing you have to do is
convert your normal method of representing graphic color (RGB) to a hexadecimal
representation.
If you have used an image editor at all, you’ve probably seen how the
raster environment defines colors. Using RGB or CYMK sliders you combine
additive or subtractive primaries to create a single color. In hexadecimal,
however, each color requires a unique hexadecimal code to define it. To
do the conversion you will need to start with an RGB-based color definition.
For example in RGB, white is defined as R:255, B:255, G:255. The hexadecimal
representation is FFFFFF. For black, the RGB definition is R:0, B:0, G:0.
The hexadecimal representation is 000000. You’ll find that hex is a pretty
abstract way to represent color and it is one that many of us despise.
Probably the only one’s that you will remember from memory are black, white,
and “Netscape Gray” (CCCCCC). As a definite hex-hater myself, there is
a quick method that you can do with a calculator that will give you accurate
results every time. Note, however, it won’t make it any more fun!
Calculating Hex
To calculate hexadecimal values you’ll need two specific things.
The first thing you’ll need to know is the RGB specification of the color
you wish to convert to hex. For this, you can use a bitmap editor.
Choose a color visually and then write down the RGB color values shown
in the editor. The second thing you’ll need is a scientific calculator.
If you’ve got a PC, you have it already (look in the Accessories group).
Unfortunately for Macintosh users, there is not system calculator that
can work in scientific mode. There are, however, several shareware and
freeware calculators that have this capability.
To convert an RGB color to a hexadecimal color you would:
Begin by finding the red, green, and blue values for the color in the your
image editor. I have chose an RGB color defined by R:222, G:39, and B:151
for this example. Any color will do.
Next open the calculator from the Window’s Accessories group.
Select Scientific from the View menu.
Make sure you are in DEC mode and enter the red value into the calculator.
From the example, you would use the red value of 222.
Next you click on HEX, which will then show you the hex value of the red
decimal value. Your red value of 222 gives you a hex value of DE. Jot this
hex value down.
Repeat steps 4 and 5 with the green and blue values. The green value of
39, should give you a hex value of 27. The blue value of 151 should give
you a hex value of 97.
Once you have converted the red, green, and blue values to hex, write
your results as a single string. This is the hex value of the color. In
the example, an RGB color of R:222, G:39, and B:151 is represented with
hexadecimal code as DE2797.
You would then use this value in your HTML code. If you wanted the background
color of the browser to be this color you would enter:
<BODY BGCOLOR=“#DE2797”>
This makes the background of the browser the specified hex color.
|