> Home > Web Design > Colors
Colors
Here is some general information about specifying colors in HTML, provided
in response to a question.
General
Frequently, it is useful to directly specify colors directly. For instance,
<body bgcolor="FFFFFF">
specifies that the background color will be white. For many colors, the name
can be used directly; thus
<body bgcolor="white">
will also set the background color to white. Thus, it is not necessary to
use or understand the general notation to productively use HTML.
You can also set the background for a table:
<table bgcolor="yellow">
will set the background color for the table to yellow. You can also
specify the color of text:
<font color="red">RED WRITING</font>
will produce RED WRITING.
Not all browsers perfectly represent all colors you could use.
Many people recommend the use of "brower-safe" colors only. The
use of "browser-safe" colors will allow your page to be viewed on
older systems without "dithering" (when the browser cannot represent
a color exactly, it tries to approximate it by a mixture of different
colored pixels). The down-side is that there are only 216 browser-safe
colors. There is more information on this below.
Here are some names and colors (taken from the rgb.txt file for
the X windows sytem on UNIX).
These all seem to work in my browser (Netscape v. 4.61 on FreeBSD)
(except for violet red, D02090);
let me know if they fail on yours. I'm not exactly sure who
came up with the names; at any rate they seem to work.
Numerical representation of colors
If you wish to use the general numerical representation, it is not difficult however. The
colors are specified by three pairs. The first pair specifes the level
of red, the second pair the level of green, and the third the level of blue.
The colors that are available are produced by combinations of red, green,
and blue (using an additive color model). Yellow is produced by red plus
green, magenta is produced by red plus blue, and cyan is produced by blue
plus green.
|
|
|
|
| Intensity of Red |
Intensity of Green |
Intensity of Blue |
Each pair referred to above is actually a pair of hexadecimal digits. Two
hexadecimal digits can express any number from 0 to 255. The bigger the
number, the more of each color; 0 is the least amount of a given color, and
255 (hexadecimal FF) is the most.
If you specify the minimum intensity of all three
colors (000000), you get black. If you specify the maximum
intensity of all three colors, you get white. Before proceeding
further, let's look at all the colors that can be specified by
just this information:
| name |
representation |
details |
|
|
FFFFFF |
|
|
|
|
| Full Red |
Full Green |
Full Blue |
|
|
|
FFFF00 |
|
|
|
|
| Full Red |
Full Green |
No Blue |
|
|
|
FF00FF |
|
|
|
|
| Full Red |
No Green |
Full Blue |
|
|
|
00FFFF |
|
|
|
|
| No Red |
Full Green |
Full Blue |
|
|
|
FF0000 |
|
|
|
|
| Full Red |
No Green |
No Blue |
|
|
|
00FF00 |
|
|
|
|
| No Red |
Full Green |
No Blue |
|
|
|
0000FF |
|
|
|
|
| No Red |
No Green |
Full Blue |
|
|
|
000000 |
|
To form a given color, decide how much intensity of red, green, and
blue will be needed to represent it; this is rarely obvious (more
below). Then specify these intensity levels using two hexadecimal
digits, and string the two digits for red, the two digits for green,
and the two digits together to yield six digits. These six
digits then specify a color.
In hexadecimal, the second place in a numeral is the "sixteens" place,
rather than the tens place. So "10" in hexadecimal is really
1 × 16 + 0 × 1, or "16" in decimal. The numbers
ten, eleven, twelve, thirteen, fourteen, and fifteen all require
two places to represent in decimal, but they have to have a zero in
the "sixteens" place in hexadecimal. They are represented by the
single hexadecimal digits A, B, C, D, E, and F (respectively). So
fifteen is 15 in decimal (1 × 10 + 5 × 1), but in
hexadecimal it is just (0 × 16 + E × 1), with E being 15.
The following table illustrates counting in
hexadecimal.
| Decimal (base 10) |
Hexadecimal (base 16) |
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
| 16 | 10 |
| 17 | 11 |
| 18 | 12 |
| 19 | 13 |
| 20 | 14 |
| 21 | 15 |
| 22 | 16 |
| 23 | 17 |
| 24 | 18 |
| 25 | 19 |
| 26 | 1A |
| 27 | 1B |
| 28 | 1C |
| 29 | 1D |
| 30 | 1E |
| 31 | 1F |
| 32 | 20 |
By specifying intermediate numbers for the intensity of red,
green, and blue, you can generate other interesting colors.
Here is a table with a few pale colors that might be useful
for a background, together with their names.
| name |
representation |
details |
|
|
FFFAFA |
|
|
|
F8F8FF |
|
|
|
FDF5D6 |
|
|
|
FAF0D6 |
|
|
|
FADBC7 |
|
|
|
FFFFF0 |
|
|
|
FFF5DD |
|
|
|
F0FFFF |
|
The names are certainly friendlier to look at, but in other ways
less informative: if all you have is the name of a color, it isn't
clear how to make it slightly lighter for instance. With the hex
numbers you know that you can brighten it by adding a small amount
to each of the red, green, and blue components.
Sometimes a bit of trial and error is needed to
find the right color; it is not always obvious how to get the color
you want. Many web authoring programs - including Netscape Composer -
have interactive color
wheels that allow you to choose the right color from the screen;
so do graphics programs like the Gnu Image Manipulation Program or
Adobe Photoshop.
In Netscape Composer, you can create a custom background color by
selecting
Format: Page Colors and Properties, and then under the "Colors and
Background" tab, selecting the "Use custom colors" check box. If you
click on "Background", a small "Set colors" dialog box appears. You can
either select a color using the "Swatches" tab, or else select the RGB
tab, and construct your own colors by dialing in the amounts of red,
green, and blue until the color it's displaying looks right to you. By
the way it allows you to use Decimal numerals between 0 and 255, the
equivalent Hexadecimal numerals between 0 and FF, or percents.
Browser safe colors
Colors which can be represented using only 00, 33, 66, 99, CC, and
FF for red, green, and blue are "browser-safe".
Thus, 3300CC, CC6699, FFFFFF, FF00CC, etc. are browser-safe.
Using such colors helps your page be viewed without dithering on
old browsers, as stated above. It is also worth remembering that
different machines may render the same color differently.
All content © 2000 Mathepi.Com (except R and Rweb).
About us.