| |
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 too dreary. But, for a subtle contrast effect for the odd page
within a site, 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 RGB
(or decimal) values of more shades of gray than you could ever need, including all the so-called
'web-safe' grays, half-color grays, named grays and specialist
grays.
| WS |
|
= |
|
Web Safe Color (an archaic computing term) |
All the grays listed will be browser-safe in Netscape 4 and later and Internet Explorer 5 and later.
But, for your viewers using earlier browsers, fringe browsers, or
old (pre-Windows 98) computer systems, there would be no guarantee of cross-platform consistency if
you depart from the greys marked web safe (WS).
There was once 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 that would be seen on the screens of all other viewers of your pages. If you strayed away from the 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 that any individual will see is not guaranteed simply by putting a 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 moved on and, even if you use the most obscure of colors, it is a fairly safe bet nowadays that nearly all viewers will see what you want them to see.
A bigger potential problem, these days, stems from the growing popularity of flat monitors -
a problem that some web designers may still not appreciate. Which is that very pale shades are likely to appear washed out - that is, white, or almost white, on most flat screens, because of the brighter illumination employed with these screens. To avoid the risk of this washed-out effect would mean, unfortunately, never using any shade from #CCCCCC or lighter (e.g. not #CCCCFF, not #FFCCFF etc.). In the case of grays, this means being very careful about using any of those grays shown between the two red lines in the above chart, including the web-safe one (#CCCCCC) as well as the three even lighter ones with browser-recognised names i.e. Lightgray, Gainsboro and Whitesmoke. Pastel shades have always been popular with web designers so it is a shame about the problem caused by flat screens. And, of course, if you actually use a flat screen when designing your web pages, and were to compensate by using a darker shade, you might then spoil your page for all those still using conventional (true-color) CRT monitors.
Because of the problem created by flat screens, when wanting 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 not by white or another pastel shade. That will ensure a satisfactory contrast is maintained for flat screen users. Those darker surrounding colors, it should be noted, 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 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. |
|
|
| 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 |
|
| 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 that you've probably already got. 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 but better
color-picker than EyeDropper in many situations. It can be downloaded for free.
Even if you've already got EyeDropper, our advice is 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. |
|
 |
 |
 |
 |
|
|
|