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

Computing : Web Design

Menu Contact

Color Chart - Grays

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.

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

#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

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

Menu Half-Colors Top Contact