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.
| HEX | #808080 | |
|---|---|---|
| RGB | rgb(128, 128, 128) | |
| HSL | hsl(0, 0%, 50%) | |
| HSV | hsv(0, 0%, 50%) | |
| CMYK | cmyk(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.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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
Shades
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.