| |
This article began life when browsers were still quite primitive and most computers had true-colour
but bulky CRT display monitors. Since then we have gone through a changeover period from
CRT monitors to flat-screen displays right until the present time when flat screens are thoroughly
dominant and portable computers are all the rage. Although still largely the original
article, updated text appears in places to cater for the later changes in technology.
Grays (or greys) are often overlooked by web page designers. This is a shame, because
grays can be very useful. Not so much as a theme color for a website - that would be far
too dreary. But, for a subtle contrast effect for the odd page within a website, such
as an order-form page, gray can often be quite an effective choice. Click the following
link to see an example of grays at work.
On the right is a novel Color Chart ©
which shows the hexadecimal values, names, and decimal RGB values of more shades of gray than
you could ever need, including all the so-called 'web-safe' grays, all half-color grays, named
grays and specialist grays.
In the chart, web-safe colors are marked as WS. This is an
archaic computing term dating to a time when monitors, browsers, HTML and web pages had limited
color capability. It holds little relevance for web designers today.
All the grays listed on the right have been browser-safe in all browsers since
Netscape 4 and Explorer 5, hence also in all later brands like Firefox, Safari, Chrome etc.
But, if you were still wanting to design your pages with full backwards compatibility for the
handful of diehard viewers who might still be hanging on to earlier browsers, older fringe browsers,
or old Windows 95 computer systems, there would be no guarantee of cross-platform consistency
if you depart from the grays marked as WS (web safe).
There was a time when it was most advisable only to use colors that were web-safe if you wanted
to be confident that the colors you could see on your own screen were going to be the same as
those which would be seen on the screens of all other viewers of your pages. If
you strayed away from those web-safe colors in your page designs, the colors that other people
would actually see could, and would, have varied, for some of them, from being the same (at
best), to dithering badly (smudgy edges), or being washed-out (faded or whitish) or (at worst)
going horribly murky. Even now, the colors which any individual will see is not guaranteed
simply by putting a color's correct hex code in your page's HTML. It is also at the mercy
of the age, quality, type and make of graphics card, video card, video drivers, operating system,
browser, and monitor on the other person's system. There are, therefore, a lot of variable
factors at work out there all waiting to screw up the colors of your latest masterpiece.
However, time has definitely moved on and, even if you use the most obscure of colors, it is
a fairly safe bet nowadays that most of your viewers, but not all, will see something similar
to the colors you want them to see, more or less.
The biggest complication, these days, has stemmed from the growing popularity of flat-screen
monitors and the explosion in low-cost laptops and notebooks. The complication is that,
on many flat screens, very pale shades are likely to lose their color-tone and appear washed
out - that is, white, or almost white, because of the brighter illumination on these screens
and/or because of poor color adjustment or low quality. To avoid the risk of this washed-out
effect (on other people's screens remember, not necessarily on yours) would mean never using
any of the pastel shades generated solely by CC and FF combinations (such as #CCCCCC, #CCCCFF,
#FFCCFF etc.) nor even lighter shades. In the case of grays only, this means being very
careful about using any of those grays shown between the two red lines in the chart above, including the web-safe one (#CCCCCC) and the three lighter ones with browser-recognised names i.e. Lightgray, Gainsboro and Whitesmoke, and the newest one #FBFBFB which is used to give a pseudo-effect of real newspaper on hand-held e-readers. Pastel shades were always very popular with web designers in the days when CRT monitors dominated, so it is a shame about the problem caused by flat screens. If you use a flat screen when designing your web pages, and compensate by using a darker shade instead of a pastel shade, you might spoil your page for those viewers still using (true-color) CRT monitors.
Because of the changed circumstances created by flat screens, when you want to use a pastel
gray, or any other pastel color for that matter, the safest policy is to ensure the color is
surrounded on all four sides by darker colors, and definitely not by white or another pastel
shade. That will ensure a satisfactory contrast is maintained for all flat screen users. An example occurs in the Tips' box right. On a CRT monitor, it would have a nice pale-yellow background (pastel shade #CCCCFF). But what you, the viewer will be seeing, if you have a flat screen, and depending on how well it is adjusted, will be anything from a nice pale yellow through smokey gray to virtual white. To cater for that, our solution is to surround the tips' section with a black border so it is still distinguishable from the general text areas irrespective of how pale the background turns out to be on other people's screens. A such darker, surrounding colors do not necessarily have to be in the web page itself. For example, a full-width pastel area across the top of a web page would automatically be next to darker colors on three sides i.e. where it meets with the browser toolbars along the top edge, and where it meets with the actual screen on the left-hand and right-hand sides. Thus, careful thought about what will be next to pastel areas can still make their use feasible. Though the true effect will still only be seen by checking it on a CRT monitor. However, CRT monitors have become a rapidly dying breed, so are possibly no longer worth worrying about. |
|
|
| Safe |
Hex vals |
Names |
RGB vals |
| WS |
#000000 * |
black |
0 0 0 |
| |
#1a1a1a |
|
26 26 26 |
| |
#2f4f4f |
darkslategray |
47 79 79 |
| WS |
#333333 |
|
51 51 51 |
| |
#4d4d4d |
|
77 77 77 |
| WS |
#666666 |
|
102 102 102 |
| |
#696969 |
dimgray |
105 105 105 |
| |
#708090 |
slategray |
112 128 144 |
| |
#778899 |
lightslategray |
119 136 153 |
| WS |
#808080 * |
gray |
128 128 128 |
| |
#8a8a8a |
|
137 137 137 |
| WS |
#999999 |
|
152 152 152 |
| |
#a0a0a0 |
|
160 160 160 |
| |
#a9a9a9 |
darkgray |
169 169 169 |
| |
#ababab |
|
171 171 171 |
| |
#b3b3b3 |
|
178 178 178 |
| |
#bababa |
|
187 187 187 |
| WS |
#c0c0c0 * |
silver |
192 192 192 |
|
| WS |
#cccccc |
|
204 204 204 |
| |
#d3d3d3 |
lightgray |
211 211 211 |
| |
#dcdcdc |
gainsboro |
220 220 220 |
| |
#dedede |
|
221 221 221 |
| |
#dfdfdf * |
|
223 223 223 |
| |
#e0e0e0 * |
|
224 224 224 |
| |
#e6e6e6 |
|
229 229 229 |
| |
#ededed |
|
238 238 238 |
| |
#F5F5F5 |
whitesmoke |
245 245 245 |
| |
#FAFAFA |
|
250 250 250 |
| |
#FBFBFB |
e-paper grey |
251 251 251 |
|
| WS |
#FFFFFF * |
white |
255 255 255 |
| |
|
| * |
The six colors marked with an asterisk are the ones to use if wanting to mimic the Windows' traditional gray interface, where 'silver' (#C0C0C0) would be the principal backdrop gray, and the other five shades would variously be used for the borders that generate the 3-D effect for the old classic-style gray dialogs and buttons.
FAFAFA is a newer 'gray' in Windows, sometimes used to give an off-white background to drop-down menus in Windows XP. |
 |
 |
 |
 |
 |
| |
Tips |
|
 |
 |
 |
 |
| |
1 |
Eyedropper is a well-known color-picker which you probably have already.
In the rare event that you experience trouble with the accuracy of EyeDropper's hex readings
when sampling web-page colors, this could be because your desktop's display properties are set
on 'High Color'. If so, changing to 'True Color', if this extra option is available on
your system, will probably fix it. |
|
 |
 |
 |
 |
| |
2 |
Color Cop is a less well known color-picker than EyeDropper but is even
better in certain respects. It can be downloaded for free. Although you will be
happy with EyeDropper if you already have it, our advice would be to get the usefully-different
Color Cop as well. You can get to the download site for Color Cop via our Free
Stuff page. |
|
 |
 |
 |
 |
| |
3 |
By switching on EyeDropper's 'Show co-ordinates' property, it can serve, indirectly,
as a handy little screen ruler. This can be very useful when quickly needing to determine
heights and widths of things on a browser's screen, such as button sizes, column widths etc.
You can do the same thing with Color Cop by dragging its magnifying glass to either side of
an object and reading off the exact pixels. |
|
 |
 |
 |
 |
|
|
|