gray — #808080
#808080
rgb(128, 128, 128) · hsl(0, 0%, 50%) · CSS keyword gray
Can you put text on it?
| Contrast | Body text | Large text | |
|---|---|---|---|
| gray on white | 3.95:1 | — | AA |
| gray on black | 5.32:1 | AA | AA |
As a background, gray takes black text: 5.32:1 against 3.95:1 the other way. A colour picker will give you the hex and stop there, which is why so many palettes look right and fail an accessibility audit.
Using it
color: gray;
color: #808080;
color: rgb(128 128 128);All three are the same colour. The keyword is one of the 141 CSS named colours — a list settled in CSS 2.1 and added to exactly once since, when rebeccapurple was standardised in 2014.
grey is the same colour: CSS accepts both spellings and they are byte for byte identical, so color: gray and color: grey render the same.
Colours close to gray
- slategray — #708090
- lightslategray — #778899
- dimgray — #696969
- cadetblue — #5F9EA0
- mediumpurple — #9370DB
- olivedrab — #6B8E23
Frequently asked questions
What is the hex code for gray?
The hex code for gray is #808080 — RGB 128, 128, 128.
Can I use gray for text?
Only for large text. gray reaches 3.95:1 against white — enough for the 3:1 of headings at 24px or 18.5px bold, short of the 4.5:1 body text needs.
Should text on gray be black or white?
Black — 5.32:1 against 3.95:1 the other way.
Other named colours
- green — #008000
- greenyellow — #ADFF2F
- honeydew — #F0FFF0
- hotpink — #FF69B4
- indianred — #CD5C5C
- indigo — #4B0082
- ivory — #FFFFF0
- khaki — #F0E68C
- lavender — #E6E6FA
- lavenderblush — #FFF0F5
- lawngreen — #7CFC00
- lemonchiffon — #FFFACD
#808080 in full — tints, shades and harmonies · All named colours · Colour reference