Grey and Gray Colors: HEX Codes, CSS Greys and Every Named Shade

Grey or gray: which spelling is right?

Both. Merriam-Webster describes gray and grey as two common spellings for the neutral shades between black and white: gray is more frequent in American English, and grey is preferred in Canada, the UK and elsewhere. Both come from the Old English word grǣg. The Government of Canada's Language Portal gives the same advice for Canadian writing, where grey is preferred and gray is also correct.

The practical rule is to match the English your audience reads and stay consistent within one document. Proper names keep their own spelling no matter where you are: Earl Grey tea, a greyhound, or the Dorian Gray of the novel. If someone is searching "colour grey", they are almost certainly writing British or Commonwealth English, and the color they want is exactly the same one an American calls gray.

Our own catalog shows how lopsided the naming is. Of the grey and gray reference names on this page (counted November 11, 2026), 626 use the spelling grey and 40 use gray. That's mostly because the large public name lists we draw on, such as the xkcd color survey and the open-source color-names collection, lean toward grey. See sources and credits for every list we use.

Why is CSS "darkgray" lighter than "gray"?

Because the two names come from different systems. The first web browsers, Mosaic and Netscape Navigator, borrowed their color names from the X11 color list used by Unix workstations. In X11, plain gray was a light grey (#BEBEBE, about 75% brightness), and dark gray (#A9A9A9) sat below it. HTML had separately reserved the word gray for the exact 50% value, #808080.

When the W3C adopted the X11 names for SVG and CSS3, it kept HTML's #808080 for gray and took darkgray from X11 unchanged. The result is that CSS darkgray ends up noticeably lighter than CSS gray, and the CSS Color Level 4 specification still defines them that way. The fix in practice is simple: go by the HEX code, not the name. If you want a grey darker than #808080, dimgray (#696969) or a custom code is what you're after.

The same history explains the alias pairs. CSS Color 4 lists both spellings for every grey keyword, so darkgrey, lightslategrey and dimgrey all work the same as their gray versions. Gainsboro, whitesmoke and silver have only one spelling because they don't contain the word.

Warm grey vs cool grey

A true neutral grey has equal red, green and blue values: #808080, #767676 and #696969 are all neutral. Most named greys aren't perfectly neutral. They carry a slight tint, and that undertone is what designers and paint shoppers mean by warm and cool.

• Cool greys lean blue or blue-green, so the blue value in the HEX code is a little higher than the red. Slate gray (#708090) is the classic example. The xkcd survey's cool grey (#95A3A6) and battleship grey (#6B7C85) are others. Cool greys read crisp, modern and a little technical.
• Warm greys lean beige, brown or taupe, so the red value is a little higher than the blue. The xkcd survey's warm grey (#978A84) is a good reference point. Warm greys feel softer and pair easily with wood, brass and cream, which is why the warm-grey-meets-beige family has its own name, greige.

To check a grey yourself, open its color page and compare the R, G and B numbers. If blue is highest, it leans cool. If red is highest, it leans warm. If all three are equal, it's neutral. Screens and paint chips both shift with the light around them, so treat any HEX code as a starting point and look at a real sample where you'll use it. Our cool gray, greige, charcoal and mushroom lists pick greys by their actual color values, so every swatch on them really does lean the way the list says.

Using grey for text, buttons and backgrounds

Grey is the color people reach for when they want something quieter than black: captions, placeholder text, disabled buttons, borders. That's also where it goes wrong most often. WCAG 2's contrast rule for normal-size text is at least 4.5:1, and 3:1 for large text (about 18.5px bold or 24px regular). Our calculations for neutral greys give these working limits:

• On a white background, #767676 is the lightest neutral grey that passes 4.5:1, and #949494 is the lightest that passes 3:1 for large text.
• On a black background, #757575 is the darkest neutral grey that passes 4.5:1.
• Plain CSS gray (#808080) sits in between: 3.95:1 on white and 5.32:1 on black, so it's fine for small text on black but not on white.

Light greys like whitesmoke, gainsboro and lightgray are background and border colors, not text colors, on a white page. All three are under 1.6:1 against white. The same logic runs in reverse in dark mode: darkslategray (#2F4F4F) makes a good dark panel, but it's too dark for text on black.

How to find the HEX code of a grey you've seen

If the grey is on a screen, a browser color picker or your design tool's eyedropper gives you the exact code. If it's a paint chip or a fabric, a phone photo only gets you close, because lighting and the camera shift the value. Our guide to finding the HEX code of a color walks through both cases. Once you have a code, paste it into the address /color/ plus the six digits to see its RGB values, contrast, and the nearest named greys.

Name a grey

Grey is an easy color to love and a hard one to describe, which is part of why so many greys have names. If there's a particular grey that means something to you, such as the color of a pet's coat, a grandfather's favorite sweater or the sky over a place you love, you can give it a name of your own in our registry. It costs $29.99 for one HEX code and includes a certificate you can print or save as a PDF, a Registry ID, and a public registry entry. Each exact HEX code can be registered only once.

The CSS named greys in the table above are reserved, so they can't be registered. The codes right next to them can be, if nobody has taken them yet: #808081 is one step away from #808080, for example, and looks the same on screen. Each color page, such as #808081, shows whether that code is still available. Registering a color name records it in our private registry; it doesn't make you the owner of the color or give you a trademark. For a memorial, our memorial color gift page explains how people usually word the dedication.

If you're still choosing, compare a few neighbours: the white and cream list covers the near-whites, and the black color names list picks up where charcoal ends.