Gray

Mid gray is the fulcrum of every neutral system — and a trap at text sizes, where it fails white backgrounds. Use it for borders, dividers, and disabled states; promote text to darker steps.

borderssecondary UIdisabled states

Values in every format

HEX: #808080
RGB: rgb(128, 128, 128)
HSL: hsl(0, 0%, 50%)
OKLCH: oklch(0.6 0 0)
CMYK: cmyk(0%, 0%, 0%, 49.8%)

Hue family: Grey · closest CSS name: gray. Convert this color

Perceptual shade scale

Eleven even steps from 50 to 950, computed in OKLCH — the starred stop is #808080 itself.

50#f7f7f7
100#ededed
200#dedede
300#cccccc
400#b2b2b2
500#999999
600 ★#808080
700#696969
800#525252
900#3e3e3e
950#262626

Build a full system from #808080

Harmonies with gray

Complementary

Maximum contrast — use one side for action, the other sparingly.

#808080 #808080

Analogous

Neighbors on the wheel — calm, cohesive, hard to get wrong.

#808080 #808080 #808080

Triadic

Three evenly spaced hues — vibrant, needs one clear leader.

#808080 #808080 #808080

Measured contrast

on white3.95:1 · AA large only

on black5.32:1 · AA normal ✓

Check your own pairs