Grays - Color Selector Chart Websafe Web Safe Gray Grey Greys Colour Colors Colours

Computing : Web Design

Color Chart - Grays

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

#000000 *

black

0 0 0

#1a1a1a

26 26 26

#2f4f4f

darkslategray

47 79 79

#333333

51 51 51

#4d4d4d

77 77 77

#666666

102 102 102

#696969

dimgray

105 105 105

#708090

slategray

112 128 144

#778899

lightslategray

119 136 153

#808080 *

gray

128 128 128

#8a8a8a

137 137 137

#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

#c0c0c0 *

silver

192 192 192

#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

#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.

Menu Half-Colors Top Contact