| |
| |
Using The Chart - To find the 6-digit hexadecimal value of any color in the chart,
read off the four digits to the left of the color, followed by the two digits above the color.
For example, in the bottom (single-row) block above, the middle color has the digits #0000 to
the left and 80 to the top which, when combined, give the value, for that particular color,
of #000080 (navy blue). Repeat the same simple process to read off the value of any other
color in any of the blocks. To use navy as, say, the background color of a table cell,
the full line of HTML code could look something like:-
<td class=white bgcolor=#000080>This cell has white text on a navy background</td>. |
|
| This cell has white text on
a navy background |
|
| |
About the Chart
You will have noticed that the chart is built up of a number of pairs of blocks side-by-side.
You may also have noticed that the top line of actual colors in each such side-by-side pair
of blocks is identical. This is because adjacent blocks always start from the same common
denominator. Variations in their hexadecimal values start in the second lines down in
each pair of blocks. |
|
| You may also have realised that each pair of blocks is smaller than the pair above (by one
line each time). This occurs as the different permutations of hexadecimal values are progressively
used up. Ultimately, the final two blocks at the bottom of the chart are left with only
one line in each, lines which also happen to be identical to one another because they are the
top and, therefore, common lines for that pair of blocks. |
|
| If you look at the chart thoroughly, you will see that whole rafts of colors, despite having
unique hexadecimal values, appear virtually indistinguishable from one another. This occurs
because the entire chart, by its very nature, falls within the limiting values of the Red Green
Blue (RGB) color system. The more values that are included in such a chart, the closer
many of those colors will become to one another. Consequently, whilst the chart makes
for a nice colourful page, it is possibly more pretty than purposeful! |
| |
About hexadecimal notation
Hexadecimal representation of colors has been the norm from the time of Netscape Navigator 1
but the variety of colors then available was subject to the quality of computer systems at that
time, especially the limited number of colors that monitors could display. In fact, it
was not really until version 4 browsers, and corresponding improvements in monitors, video cards
etc., that web page designers finally had the freedom to use almost any hexadecimal color they
cared to. |
|
| 'Hexadecimal' means 6 + 10, and is signifying a color-numbering system to a base of 16 (like
the number of ounces to a pound), as opposed to a base of 10 (like the number of millimetres
in a centimetre), or a base of 12 (like the number of inches in a foot). All computers
work in binary, or base 2 which, apparently, is closely related to base 16. |
|
| The 16 digits, counting the zero, in the hexadecimal color system are 0 1 2 3 4 5 6 7 8
9 A B C D E F (where A = 10, B = 11, F=15). These sixteen digits are capable of being
permed into over 16 million different six-digit color combinations, ranging from #000000 (the
darkest) through all the colors of the spectrum until #FFFFFF (the lightest). It ingeniously
enables every single color to be denoted by a specific-number of digits (i.e. 6). This
is very computer-friendly, as opposed to the variable number of digits in a color's RGB notation
(from 3 to 9) or letters in a color's name (from 3 to thirteen, or more, and then only if it
has one). |
| |
Web-Safe Palette
Web-safe colors are the 216 colors which can be formed by their components being taken from
a mere six of the vast number of possible pairings of hexadecimal values, namely FF
CC 99 66 33 and 00. An actual example would be FF+00+00, written as
#FF0000, which is red. The preceding # symbol can be sounded as either 'hash' or as 'number'
- the latter being an americanism from their "#1" instead of everybody else's "No.
1"). The total number of possible combinations of those six key pairings is 216.
And that, therefore, is the basic number of colors in the web-safe palette. |
| |
Named Colors
Support for American names for colors was introduced with Netscape Navigator 2, followed by
Internet Explorer 3. 130 different colors have names, though there are 132 names because
two of the colors have two permissible names, namely magenta or fuchsia, and aqua or cyan.
The use of names, as opposed to numbers, never really caught on with serious HTML coders, even
less so the other permitted alternative of using RGB notation. |
|
| Of the 132 supported names, only 9 are in the 216-color web-safe palette, namely black,
white, red, blue, magenta, aqua, cyan, lime and yellow. These nine, plus another seven,
making sixteen in all, are all embodied somewhere within the half-color palette above.
The other seven are gray, green, maroon, navy, olive, purple and teal. The other 114 named
colors all have obscure hexadecimal codes apart from just one, namely #C0C0C0, a.k.a. silver. |
|
| It is advisable to only use hexadecimal values, not names, when coding web pages, because
there is no guarantee that names, especially the really obscure names, will be properly supported
in the fringe browsers that a small number of people like to use. |
|
| If you do ever use the names of colors, instead of numbers, be terribly careful to spell
the names correctly. If you get even one letter wrong, browsers will substitute
a color - which may not be anything like the color you had in mind! |
| |
Half-Colors
These are colors whose 6-figure hex values are derived from the following scale of pairs...
FF E6 CC B3 99 80 66 4D 33 1A 00.
An example would be 80+00+80, written as #800080, which is the traditional purple color for
visited hyperlinks. The full half-color scale is a mix of the web-safe pairs (i.e. FF CC 99
66 33 00), and the pairs that are halfway between (i.e. E6 B3 80 4D 1A). The theory is that
the half-colors provide a wider choice to designers than just the web-safe palette, and might
be better supported on older computer systems than might some of the more random hexadecimal
combinations. |
| |
Cross-platform compatibility
The need for web-page designers to adhere to web-safe colors has diminished significantly in
recent years, almost to the point of being irrelevant. In fact, any internet user with
a computer and monitor that were acquired new since 1998 should be able to see a range of colors
vastly in excess of the traditional 216 web-safe colors. A good general rule for designers
might, therefore, be to i) choose colors from the web-safe palette and/or the extended
list of named colors (but by number) all the time if possible, ii) choose additional colors
from the half-color palette above on occasions that a wider choice is needed, or iii) use any
hexadecimal value you like if you are unconcerned about how your pages may appear on the screens
of any strange persons still hanging onto pre-Windows 98 computer systems or browsers. |
| |
Flat screen TFT / LCD Monitors
Finally, always try to remember that the many modern-day viewers who are now using flat
screen monitors, including laptops, will see your colors much brighter, hence lighter, than
the true colors you can see yourself if you are designing on a conventional (true-color) CRT
monitor. For example, pastel shades, which always look terrific on a CRT monitor, may
appear as bland white or near white on a TFT monitor. Or a subtle gold may appear as a
garish yellow. And so on. Therefore, if you use any very pale shades on your
page, be sure to view them on a flat screen to make sure the definition is acceptable.
To minimise problems, always try to surround each pastel area with contrasting darker colors.
Where pastel shades are at the edges of a page, the contrast on the outer sides will be provided
by the dark edges of a viewer's browser. Do not risk one pastel shade next to white, nor
next to another pastel, otherwise, on many flat screens, they will virtually merge into a single
area of white, or off-white, respectively. |
|
| Conversely, if you are designing on a flat screen, be sure to view the end result on a CRT
monitor as well - to ensure the pages will not be appearing darker than you would like
to the many viewers using that type of monitor. Do not ignore this advice whilever CRT
monitors remain in common or fairly common use. For example, #A3B0C0 is a flat, pale-blue
color that would make a pleasant background behind black or navy text. But, on a CRT monitor,
it is not even blue, more of a slate-grey, and would look crap as a background behind any text.
So, take nothing for granted in your choice of colors, especially the obscure hex combinations -
always check the results on both LCD and CRT screens and try to find a happy medium. |
©
that displays a total of 1,331 such colors by their 6-character hexadecimal codes.