| |
| |
Using The Chart - To find the 6-digit hexadecimal value of any colour in the chart,
read off the four digits to the left of the colour, followed by the two digits above the colour.
For example, in the bottom (single-row) block above, the middle colour has the digits #0000 to
the left and 80 to the top which, when combined, give the value, for that particular colour,
of #000080 (navy blue). Repeat the same simple process to read off the value of any other
colour in any of the blocks. To use navy as, say, the background colour 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 colours 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 colours, 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) colour system. The more values that are included in such a chart, the closer
many of those colours 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 colours has been the norm from the time of Netscape Navigator 1
but the variety of colours then available was subject to the quality of computer systems at that
time, especially the limited number of colours 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 colour they
cared to. |
|
| 'Hexadecimal' means 6 + 10, and is signifying a colour-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 colour 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 colour combinations, ranging from #000000 (the
darkest) through all the colours of the spectrum until #FFFFFF (the lightest). It ingeniously
enables every single colour 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 colour's RGB notation
(from 3 to 9) or letters in a colour's name (from 3 to thirteen, or more, and then only if it
has one). |
| |
Web-Safe Palette
Web-safe colours are the 216 colours 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 colours in the web-safe palette. |
| |
Named Colours
Support for American names for colours was introduced with Netscape Navigator 2, followed by
Internet Explorer 3. 130 different colours have names, though there are 132 names because
two of the colours 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-colour 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-colour palette above.
The other seven are gray, green, maroon, navy, olive, purple and teal. The other 114 named
colours 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 colours, instead of numbers, be terribly careful to spell
the names correctly. If you get even one letter wrong, browsers will substitute
a colour - which may not be anything like the colour you originally had in mind! |
| |
Half-Colours
These are colours 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 colour for
visited hyperlinks. The full half-colour 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-colours 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 which are fully supported on modern systems. |
| |
Cross-platform compatibility
The need for web-page designers to adhere to web-safe colours 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 colours
vastly in excess of the traditional 216 web-safe colours. A good general rule for designers
might, therefore, be to i) choose colours from the web-safe palette and/or the extended
list of named colours (but by number) all the time if possible, ii) choose additional colours
from the half-colour 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 colours much brighter, hence lighter, than
the true colours you can see yourself if you are designing on a conventional (true-colour) 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 colours.
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 while ever CRT
monitors remain in common or fairly common use. For example, #A3B0C0 is a flat, pale-blue
colour 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 bad as a background behind
any text. So, take nothing for granted in your choice of colours, especially the obscure
hex combinations - always check the results on both LCD and CRT screens if possible, and
try to find a happy medium. |
©
that displays a total of 1,331 such colours by their 6-character hexadecimal codes.