Gray vs Grey: การสะกด เฉด และรหัสสี

Is it "gray" or "grey"? The answer depends entirely on which side of the Atlantic you are on — and which you choose in code, depending on which convention you follow, may produce different results. This is one of those color questions where spelling actually matters in technical contexts, even though both words refer to the same visual phenomenon: the achromatic neutral between black and white, and all the near-neutral warm and cool variants that cluster around it.

This article covers the spelling question, the CSS rules, the technical reality of what makes a color "gray," a practical guide to choosing between warm and cool grays, and a reference table of key gray hex codes across the full lightness spectrum.

American vs British Spelling: Gray vs Grey

The spelling difference is one of the clearest examples of American vs British English divergence:

Both spellings are old. The word traces back to Old English grǣg, and both "gray" and "grey" appear in English texts dating to the medieval period. The divergence in which spelling became dominant followed the general pattern of American English standardizing around one variant while British English retained another.

A useful mnemonic: grAy is American, grEy is European. The vowels A and E map to the continents.

In everyday use, neither spelling is incorrect — they refer to the same color. Style guides and brand guidelines typically specify one spelling for consistency. If you are writing for an international audience without a clear regional preference, "gray" has a slight advantage in web contexts because it is the CSS specification's preferred spelling (more on that below).

CSS Named Colors: Gray Is the Standard

When HTML and CSS color standards were established, a decision was made about which spelling to encode. Both spellings are accepted in CSS, but they do not always refer to the same color — which creates a subtle technical hazard.

The CSS Gray Family

CSS includes multiple named gray colors. Here is the complete set, with both spelling variants where applicable:

An important note: for most of the compounds (lightgray, darkgray, dimgray, slategray), both spellings exist and refer to identical hex values. For the base gray / grey, both also map to #808080. The distinction matters most for developers relying on browser defaults — in practice, CSS handles both spellings correctly.

The more important technical rule: in hex codes and RGB values, the word "gray" vs "grey" is irrelevant — only the numbers matter. #808080 is #808080 regardless of what you call it.

What Makes Gray "Gray"? The Technical Reality

A pure gray — technically called an achromatic color — has equal values in all three RGB channels. When red, green, and blue are identical, the result is a neutral with no hue:

In HSL terms, any truly achromatic gray has 0% saturation and undefined hue. The lightness percentage determines how light or dark it is.

Most "gray" colors in real-world design, however, are not perfectly achromatic — they carry slight color casts that make them "warm" or "cool."

50 Shades of Gray: Key Hex Codes Across the Spectrum

A practical reference spanning the full range from near-white to near-black:

The Important Accessibility Gray: #767676

This specific gray has outsized importance in web design: it is the lightest gray that achieves a 4.5:1 contrast ratio against white #FFFFFF, which is the WCAG AA minimum for normal text. Any gray lighter than #767676 fails WCAG AA as text on a white background.

This means the CSS gray (#808080) technically fails WCAG AA — it achieves only approximately 3.95:1 contrast ratio against white. Despite being called "gray" and feeling relatively dark, it is not dark enough for accessible body text. Use #767676 or darker for any text intended to be accessible.

Cool vs Warm Gray: The Designer's Real Question

In practice, the more important distinction for designers is not "gray vs grey" — it is warm gray vs cool gray.

Cool grays lean blue, green, or purple. They feel sleek, modern, and clinical. They pair well with other cool colors and create a tech-forward aesthetic.

Warm grays lean red, orange, or yellow. They feel natural, approachable, and earthy. They pair well with wood tones, terracotta, and other warm natural materials.

Neutral grays — perfectly achromatic with no hue — sit between the two. In practice, truly neutral grays are perceived differently depending on surrounding colors (a context effect known as simultaneous contrast).

Warm vs Cool Gray Examples

How to Identify Warm vs Cool Gray by Hex Code

Look at the RGB values: - If blue is highest among the three channels → cool gray - If red or green is highest → warm gray - If all three are equal → neutral gray

For example: - #708090 = rgb(112, 128, 144) → blue (144) is highest → cool gray - #9B9B8A = rgb(155, 155, 138) → blue (138) is lowest → warm gray - #808080 = rgb(128, 128, 128) → all equal → neutral gray

Gray in Modern Web Design

Gray is arguably the most important color in web design. It appears in: - Page backgrounds — using light grays instead of white reduces eye strain and creates visual hierarchy - UI components — borders, dividers, input field backgrounds, and card backgrounds are almost universally gray - Typography — body text on web is often dark gray rather than pure black, which reduces harshness - Disabled states — grayed-out interactive elements universally signal unavailability

Practical Gray Values for Web Design Systems

The Tailwind CSS gray scale (#F9FAFB through #030712) has become a widely-adopted reference for web design systems. Use the shade generator to create a Tailwind-style 50–950 gray scale from any base gray value.

Dark Mode Gray Strategy

Dark mode design requires careful gray selection. The temptation to use pure black #000000 as a dark mode background should be resisted in most cases — pure black creates uncomfortably harsh contrast with white text. Instead:

• Dark mode backgrounds work best in the #121212 to #1E1E1E range — dark, but not black
• Dark mode surfaces (cards, dialogs) should be a step or two lighter than the background: #2C2C2C to #3A3A3A
• Text on dark backgrounds works best in warm off-whites (#E8E8E8 to #F5F5F5) rather than pure white

Converting Gray Shades Between Color Models

For any gray, conversion is straightforward because the achromatic property means CMYK and other models behave predictably:

For truly achromatic grays (equal R, G, B), the CMYK value is always C:0 M:0 Y:0 K:{X} where K equals 100 minus the lightness percentage. Use the color converter to handle warm and cool grays with non-zero hue, where CMYK values become more complex.

Key Takeaways

• Spelling: "Gray" is American English; "grey" is British English. In CSS, both spellings are valid for named colors; most map to identical hex values. The base gray and grey both equal #808080
• Technical definition: A true achromatic gray has equal RGB channels (R=G=B) and 0% HSL saturation. Any imbalance in the channels creates warm (red/green higher) or cool (blue higher) grays
• Accessibility critical threshold: #767676 is the lightest gray that passes WCAG AA (4.5:1) as text on white. CSS gray #808080 fails — it achieves only ~3.95:1 contrast
• Warm vs cool identification: If blue channel is highest → cool gray. If red/green is highest → warm gray. Equal channels → neutral
• Web design: Gray backgrounds, borders, and text variants form the structural layer of almost every web UI. Use light mode backgrounds around #F5F5F5 and dark mode backgrounds around #121212 to #1E1E1E
• Use the shade generator to build a complete gray scale and the converter to translate any gray into CMYK, HSL, RGB, or OKLCH