Gray Color

Learn about Gray (#808080): its uses in web design, HEX/RGB/HSL values, complementary and analogous color schemes, tints and shades, and accessibility contrast recommendations.

#808080
HEX #808080
RGB rgb(128, 128, 128)
HSL 0°, 0%, 50%

About Gray Color

Gray is a versatile neutral color that works as backgrounds, borders, and secondary text. It provides subtle structure without competing with primary colors.

Use Cases for Gray

borderssecondary textdisabled statesbackgroundssubtle UI elements

Shades & Tints of Gray

#ffffff
#dfdfdf
#c0c0c0
#a0a0a0
#808080
#606060
#404040
#202020
#000000

Complementary Color

#808080
#808080

Analogous Colors

#808080
#808080
#808080

CSS Code

.gray-color {
  color: #808080;
}

Contrast Recommendations

Black text on Gray
Ratio: 5.32:1 ✓ Passes AA ✗ Fails AAA
White text on Gray
Ratio: 3.95:1 ✗ Fails AA ✗ Fails AAA

Frequently Asked Questions

What color is Gray?

Gray is represented by the hex code #808080 and has RGB values of rgb(128, 128, 128). It falls under the Gray category.

How to use Gray in web design?

Gray works well for borders, secondary text, disabled states. Gray is a versatile neutral color that works as backgrounds, borders, and secondary text. It provides subtle structure without competing with primary colors. Use it as a primary color, accent, or background depending on your design needs.

What colors go with Gray?

Colors that pair well with Gray include lightgray, darkgray, dimgray, slategray, silver. For a complementary scheme, try #808080. For an analogous scheme, use #808080 and #808080.