Gray color: code #808080

Gray

#808080

Color codes

  • HEX#808080
  • RGBrgb(128, 128, 128)
  • HSLhsl(0, 0%, 50%)
  • HSVhsv(0, 0%, 50%)
  • CMYKcmyk(0%, 0%, 0%, 50%)
  • LABlab(53.6% 0 0)
  • OKLCHoklch(60% 0 0)

About the color Gray

Gray has the HEX code #808080, which corresponds to rgb(128, 128, 128) in the RGB model. On the color wheel its hue sits at 0°, with 0% saturation and 50% lightness (hsl(0, 0%, 50%)).

With very low saturation (or extreme lightness) it works as a neutral, easy to pair with almost any other color.

As a background it calls for dark text: black reaches a 5.31:1 contrast ratio on it, versus 3.94:1 for white.

For print, the approximate conversion is cmyk(0%, 0%, 0%, 50%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Gray

Complementary

#808080 · #808080

Analogous

#808080 · #808080 · #808080

Triadic

#808080 · #808080 · #808080

Tetradic

#808080 · #808080 · #808080 · #808080

Split-complementary

#808080 · #808080 · #808080

Monochromatic

#404040 · #666666 · #808080 · #A6A6A6 · #CCCCCC

Gray with white and black text

White text Aa Bb Cc 123
3.94:1 · large text only
Black text Aa Bb Cc 123
5.31:1 · AA

Test other pairs in the contrast checker

How gray is perceived

#808080 sits right at the midpoint between black and white in RGB terms (128, 128, 128). With no hue of its own, gray reads as neutral, understated and balanced, but depending on its surroundings it can also feel cold, serious or corporate. In interiors, exposed concrete and polished cement finishes have given gray an urban, contemporary edge; in fashion, it is the backbone of suiting and sweatshirts. As always, these meanings are cultural: the same gray can look sharp in a suit and gloomy on an overcast day.

Gray and accessibility: the most common mistake

Mid gray is deceptive. #808080 text on white has a contrast ratio of about 3.9:1. It passes the WCAG 3:1 threshold for large text but fails the 4.5:1 minimum for normal text. That is the classic problem with placeholders, captions and “secondary” text that look fine in a mockup and become unreadable on a phone in sunlight. On black, the same gray reaches roughly 5.3:1. If you need a gray for text on white, darken it to around #767676, the lightest gray that still hits 4.5:1. Always test in the contrast checker and read the contrast and accessibility guide.

Warm gray or cool gray?

Cool grays

These carry a hint of blue, like charcoal gray (#36454F). They suit interfaces, tech products and minimalist spaces.

Warm grays

These lean toward beige or brown and make rooms feel more inviting, especially alongside wood and natural fabrics. Being perfectly neutral, #808080 shifts toward either side depending on its neighbors.

What to pair it with

Gray is the ideal backdrop for a single accent color. A few reliable pairings:

A good rule of thumb: let gray carry about two-thirds of the layout and save the accent for buttons, links and a few details, so the accent keeps its pull.

How to use it in CSS

:root {
  --color-gray: #808080;
  --color-gray-rgb: 128, 128, 128;
}

.elemento {
  background-color: var(--color-gray);
  color: #000000;
}

Similar colors

Use Gray in our tools