Shades of Grey
← Shades generatorFourteen keywords for seven colours, and darkgray is the lighter one
Seven grey keywords in CSS exist twice, once spelled gray and once grey, for fourteen names and seven actual colours. Gray, darkgray, dimgray, lightgray, slategray, lightslategray and darkslategray each have a grey twin with byte-identical values. Nothing else in the specification is duplicated this way. The pairing is inherited rather than designed: the X11 list carried both spellings and CSS kept both instead of choosing. Black, white, silver, gainsboro and whitesmoke round the family out with single spellings.
Two things in this table trip people up. Darkgray, #A9A9A9, is lighter than gray, #808080, by a wide margin: 2.35 to 1 against white versus 3.95. They came from different sources at different times and were never reconciled. The second is that not every grey here is neutral. Slategray and lightslategray sit at hue 210 with a blue cast, and darkslategray at hue 180 leans toward teal, so they are greys by name and tinted colours by value.
Every CSS grey name, with its contrast on white
The 21 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| white | #ffffff | rgb(255, 255, 255) | 1.00:1 | fails |
| snow | #fffafa | rgb(255, 250, 250) | 1.03:1 | fails |
| ghostwhite | #f8f8ff | rgb(248, 248, 255) | 1.06:1 | fails |
| whitesmoke | #f5f5f5 | rgb(245, 245, 245) | 1.09:1 | fails |
| gainsboro | #dcdcdc | rgb(220, 220, 220) | 1.37:1 | fails |
| lightgray | #d3d3d3 | rgb(211, 211, 211) | 1.50:1 | fails |
| lightgrey | #d3d3d3 | rgb(211, 211, 211) | 1.50:1 | fails |
| silver | #c0c0c0 | rgb(192, 192, 192) | 1.82:1 | fails |
| darkgray | #a9a9a9 | rgb(169, 169, 169) | 2.35:1 | fails |
| darkgrey | #a9a9a9 | rgb(169, 169, 169) | 2.35:1 | fails |
| lightslategray | #778899 | rgb(119, 136, 153) | 3.64:1 | AA large |
| lightslategrey | #778899 | rgb(119, 136, 153) | 3.64:1 | AA large |
| gray | #808080 | rgb(128, 128, 128) | 3.95:1 | AA large |
| grey | #808080 | rgb(128, 128, 128) | 3.95:1 | AA large |
| slategray | #708090 | rgb(112, 128, 144) | 4.05:1 | AA large |
| slategrey | #708090 | rgb(112, 128, 144) | 4.05:1 | AA large |
| dimgray | #696969 | rgb(105, 105, 105) | 5.49:1 | AA |
| dimgrey | #696969 | rgb(105, 105, 105) | 5.49:1 | AA |
| darkslategray | #2f4f4f | rgb(47, 79, 79) | 8.93:1 | AAA |
| darkslategrey | #2f4f4f | rgb(47, 79, 79) | 8.93:1 | AAA |
| black | #000000 | rgb(0, 0, 0) | 21.00:1 | AAA |
The neutral names came from wherever was handy. Black, white, silver and gray arrived through the original sixteen HTML colours; whitesmoke and gainsboro came from the X11 file, and gainsboro is the one whose origin nobody has convincingly settled. Dimgray describes an effect rather than a level. The slate group grew to three colours and six keywords, more coverage than several entire hues received, and lightgray and gainsboro sit only four points of lightness apart.
Tints, shades and tones of #808080
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
There are none. A tone is saturation taken out of a colour, and this base has no saturation in it to take — every step lands back on the colour it started from. Tones only mean something once there is some chroma to remove, which is exactly why a grey ramp is built from lightness alone.
The 50-950 scale
Using grey in an interface
Greys carry most of an interface, so the cast matters more than the value. Pick one grey family and stay in it: mixing slategray borders with dimgray text puts a blue-tinted line next to a neutral one, and the result looks dirty rather than subtle. For body text on white, dimgray at 5.49 to 1 passes AA and gray at 3.95 does not, which catches a great deal of otherwise careful work.
FAQ
- Is it gray or grey in CSS?
- Both work, and they are the same colour. Every grey keyword with a spelling variant resolves to identical values, so gray and grey, lightgray and lightgrey, and so on are interchangeable in a stylesheet. Pick one for your codebase and keep to it, since a mixed file makes searching painful. The alphabetical table happens to put gray first, which is the only tiebreaker on offer.
- Why is darkgray lighter than gray?
- Because they did not come from the same place. Gray is #808080, the halfway byte value, and arrived with the original HTML colours. Darkgray is #A9A9A9, an X11 entry, and the two were never reconciled. The names therefore run backwards: darkgray measures 2.35 to 1 against white and gray measures 3.95, so the dark one is the paler of the pair.
- Which grey should I use for body text on white?
- Dimgray, #696969, at 5.49 to 1, is the lightest named grey that still passes AA for normal text. Gray misses at 3.95, which is fine for large headings at 3 to 1 but not for paragraphs. If you want something softer than dimgray you will have to leave the keyword list and mix your own, because the next step up is a big jump to darkgray.
