Skip to content

Gray #808080

The color that does the work.

RGB
128, 128, 128
HSL
0°, 0%, 50%
CMYK
0, 0, 0, 50
Luminance
0.2159

About Gray

Gray, #808080, is the exact midpoint of the RGB cube — zero hue, zero saturation, pure lightness. It is the most-used color family in interface design by an enormous margin: text, borders, shadows, surfaces and disabled states are all gray systems wearing different lightnesses.

Every design system you have ever used ships more grays than all other colors combined — typically nine to twelve steps from near-white to near-black.

History

Gray was the color of undyed wool — the cheapest cloth — then of Confederate uniforms, industrial machinery and the gray flannel suit that named a whole corporate era. Photography and cinema lived in grayscale for a century, training the modern eye to read luminance as structure.

The spelling splits by ocean: gray in American English, grey in British — identical color, eternal search-engine question.

Psychology

Gray is neutrality incarnate: professional, balanced, deliberately unemotional. Warm grays (toward brown) feel human and material; cool grays (toward blue) feel technical and precise — the single most consequential temperature choice in a design system.

In design

Never use pure #808080 for text on white — it fails AA (3.9:1). Accessible body gray starts around #767676; comfortable UI text lives near #475569. Build gray scales with a subtle hue bias (slate, zinc, stone) rather than pure neutrals — pure gray reads dead next to any brand color.

In culture

Gray areas, gray matter, graybeards, the gray market: the color of ambiguity, intellect and age at once. In fashion it is the ultimate quiet-luxury flex — color withheld on purpose.

Brands that own gray

Shades of gray

Every format

HEX#808080
RGBrgb(128, 128, 128)
HSLhsl(0, 0%, 50%)
CMYKcmyk(0%, 0%, 0%, 50%)
LABlab(53.6 0.0 0.0)
LCHlch(53.6 0.0 180.0)
OKLCHoklch(0.600 0.000 89.9)

Copy-ready code

/* CSS */
color: #808080;
background-color: #808080;
/* Tailwind (arbitrary) */
class="text-[#808080] bg-[#808080]"
/* SCSS */
$brand: #808080;
/* SwiftUI */
Color(red: 0.502, green: 0.502, blue: 0.502)
/* Android */
Color.parseColor("#808080")

Accessibility — WCAG contrast

Aa
#808080 on white: 3.95:1
AA ✗ fail · AA-large · AAA
Aa
#808080 on black: 5.32:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red50.2%
Green50.2%
Blue50.2%

CMYK percentages

Cyan0.0%
Magenta0.0%
Yellow0.0%
Key (black)49.8%

Color previews

#808080 text on a black background

contrast 5.32:1

Card sample

#808080 text on a white background

contrast 3.95:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #808080;
Background color
Panel with #808080 background
background-color: #808080;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #808080;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(128, 128, 128, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(128, 128, 128, 0.45);
Border & gradient
Gradient panel
border: 3px solid #808080;
background: linear-gradient(135deg, #808080, #808080);

Monochromatic scale

Palettes built from #808080

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Gray, answered

What is the hex code for gray?

Middle gray is #808080 — all channels at 128. UI systems use scales like slate (#0f172a→#f8fafc) rather than one gray.

Gray or grey — which is correct?

Both. Gray is the American spelling, grey the British. CSS accepts both in named colors (gray/grey, darkgray/darkgrey…).

Is #808080 accessible for text?

No — on white it reaches only 3.9:1, below the 4.5:1 AA bar. Use #767676 or darker for body text on white.

Work with #808080 in the Color Lab