Gray #808080

Gray at #808080 is a pure middle gray, with red, green and blue all set to the same middle level. It has no hue, no warmth and no saturation. It is the color of overcast skies, wet stone and steel, and in design it reads as neutral, serious and balanced.

#808080 is CSS 'gray'. Oddly, CSS 'darkgray' (#A9A9A9) is lighter than plain gray. CSS accepts both the 'gray' and 'grey' spellings.

Gray color codes
HEX#808080
RGBrgb(128, 128, 128)
HSLhsl(0, 0%, 50%)
HSVhsv(0, 0%, 50%)
CMYKcmyk(0%, 0%, 0%, 50%)

Text on Gray

Black text reads better on Gray. Ratios use the WCAG 2 formula: 4.5:1 passes AA for body text, 3:1 passes for large text.

White text

The quick brown fox jumps over the lazy dog.

3.94:1 · AA large
Black text

The quick brown fox jumps over the lazy dog.

5.31:1 · AA

Colors that go with Gray

Gray tints and shades

Tints mix Gray with white, shades mix it with black, in 15% steps. Copy any code, or open the tint and shade generator for a full scale.

Tints

#939393
#A6A6A6
#B9B9B9
#CCCCCC
#DFDFDF

Shades

#6D6D6D
#5A5A5A
#464646
#333333
#202020

Gray color meaning

Gray sits between black and white, and people often read it the same way: neutral, balanced and noncommittal. Depending on context, it can suggest maturity and practicality or dullness and gloom. Some people find it soothing, while others find it draining, especially on gloomy days.

Much of its meaning comes from the world around us. Gray is the color of rain clouds, concrete, city streets and aging hair, which gives it ties to both wisdom and melancholy. The phrase 'gray area' makes it a color of uncertainty and compromise. Gray uniforms, gray stone buildings and gray-haired elders add to its serious tone.

In fashion and business it reads as sober and professional. The gray suit has long been standard office wear in many countries. In menswear, gray flannel and gray tweed are long-standing classics.

How to use Gray in design

Middle gray is useful for secondary text, icons, borders and placeholder shapes. As a background, it gives only moderate contrast to both black and white text, so neither reads especially crisply. As a text color on white, it suits large labels but may be too faint for small captions; check the contrast results on this page first.

In branding, gray rarely leads but makes dependable support for saturated colors. In interiors and fashion, mid-gray goes with almost everything, from yellow to burgundy.

Palettes with Gray tones

Curated palettes with a color close to #808080.

Colors similar to Gray

Work with Gray

Gray FAQ

Is gray warm or cool?

Pure gray like #808080 is neither, since it has no hue. In practice, many grays carry a slight tint: blue-grays look cool, while grays with a hint of brown or yellow look warm. Surrounding colors also change how warm or cool a gray appears.

Is it spelled gray or grey?

Both are correct. 'Gray' is the usual American spelling and 'grey' is more common in British English. CSS accepts both, so either keyword gives the same #808080. The spelling does not change the color, so pick one and use it consistently in your code and copy.

What is the difference between gray and slate gray?

Gray (#808080) is perfectly neutral. Slate gray (#708090) is a little darker and has a cool blue tint, like natural slate rock. If a plain gray looks flat in your design, slate gray adds a hint of color without turning into a real blue.