Gray vs. Grey: Spelling Difference, 30 Shades of Gray Hex Chart & CSS Guide
By Pikka Color Studio•Updated November 2026•American vs. British Spelling, W3C CSS Quirks & Neutral UI Tokens
Is it spelled gray or grey? Whether you are writing copy, choosing wall paint, or declaring CSS color variables, both words describe the exact same achromatic color spectrum between pure black (#000000) and pure white (#FFFFFF).
The Instant Rule: GrAy vs. GrEy
Gray (with an A): Standard in American English (United States).
Grey (with an E): Standard in England / British English, as well as Canada, Australia, New Zealand, and Ireland.
In HTML & CSS: Both color: gray; and color: grey; resolve to the exact same hexadecimal value: #808080 (rgb(128, 128, 128)).
Why CSS darkgray (#A9A9A9) Is Lighter Than gray (#808080)
One of the most famous quirks in web development history occurs when you place CSS darkgray next to CSS gray: darkgray is noticeably lighter than gray!
In the early 1990s, the X11 Window System defined gray as a bright silver (#BEBEBE) and created darkgray (#A9A9A9) as a slightly darker step below it. Meanwhile, the W3C HTML 3.2 specification defined gray at the mathematical 50% RGB midpoint (#808080). When CSS3 merged the HTML and X11 color lists, HTML's #808080 won the name gray, leaving X11's darkgray stranded at #A9A9A9:
gray / grey — Exact 50% midpoint between pure black and pure white.
DimGray / DimGrey
rgb(105, 105, 105)
hsl(0, 0%, 41%)
dimgray / dimgrey — Passes WCAG AA (5.48:1) on white backgrounds.
2. Cool Blue-Grays & Modern Slate UI Tokens
Achromatic grays tinted with 5% to 15% cool blue saturation. Preferred by SaaS design systems (Tailwind Slate, GitHub, Linear) for crisp legibility on LCD and OLED screens.
Tailwind CSS ships with five distinct grayscale families so designers can match the exact color temperature of their brand primary.
Gray / Grey Shade
HEX Code
RGB Value
HSL Value
CSS Keyword & Design Application
Tailwind Slate 500 (Blue Undertone)
rgb(100, 116, 139)
hsl(215, 16%, 47%)
Best paired with Blue, Indigo, Sky, and Cyan brand primaries.
Tailwind Gray 500 (Cool Indigo Tint)
rgb(107, 114, 128)
hsl(220, 9%, 46%)
Default UI gray for crisp enterprise & developer dashboards.
Tailwind Zinc 500 (Subtle Metallic)
rgb(113, 113, 122)
hsl(240, 4%, 46%)
Default shadcn/ui neutral; clean modern industrial feel.
Tailwind Neutral 500 (Pure Achromatic)
rgb(115, 115, 115)
hsl(0, 0%, 45%)
Zero hue bias (0% saturation); pure photographic grayscale.
Tailwind Stone 500 (Warm Brown Tint)
rgb(120, 113, 108)
hsl(25, 5%, 45%)
Best paired with Amber, Orange, Terracotta, and Warm Coffee.
Tailwind Taupe / Warm 700
rgb(68, 64, 60)
hsl(30, 6%, 25%)
High-contrast warm dark typography token (Stone 700).
How to Create a Smooth Brown-Grey Gradient in CSS
A brown-grey gradient (also known as a warm taupe or espresso-stone gradient) is a favorite background treatment for luxury architecture portfolios, coffee brands, and minimalist web headers. Using modern perceptual in oklch interpolation prevents the midpoint from turning flat:
