UI Shades

A study in gray

Gray

#808080

also known as grey

Family
Gray
L
0.600
C
0.000
H
-

Notes

Gray in CSS is the dead-center neutral at #808080, the midpoint of the RGB cube. It is the textbook medium gray but rarely appears in modern design systems because purpose-built neutrals with warm or cool casts tend to feel more intentional. Most UI designs prefer a slightly cooler or warmer mid-gray for type and borders, so CSS Gray ends up as a stand-in for true neutral in code samples or technical documentation. Body text in CSS Gray against white passes AA at sizes 18px and above but fails at body text sizes; for type, step down to a darker gray like Dim Gray or #4a5565.

#808080
Gray
Gray
#808080
oklch(0.6 0 0)
rgb(128 128 128)
hsl(0 0% 50.2%)
Share
#fafafa
#f4f4f4
#e5e5e5
#d4d4d4
#b4b4b4
#808080
#737373
#5e5e5e
#444444
#2d2d2d
#171717

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Gray

Cross-reference
Q&A

Frequently asked questions

What is Gray?

Gray in CSS is the dead-center neutral at #808080, the midpoint of the RGB cube. It is the textbook medium gray but rarely appears in modern design systems because purpose-built neutrals with warm or cool casts tend to feel more intentional. Its hex code is #808080.

What are the tints and shades of Gray?

uishades builds an 11-step OKLCH ramp for Gray (#808080) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Gray?

Its complementary color is #808080. Triadic partners are #808080 and #808080; analogous neighbours are #808080 and #808080.

What are the OKLCH and RGB values of Gray?

Gray is #808080 - OKLCH 0.600 0.000 0°, rgb(128 128 128), in the gray family. Also known as grey.