Skip to content

Gray Color Codes: Shades of Gray with HEX and RGB

Shades of gray with HEX, RGB and HSL codes: named CSS grays, Tailwind slate, zinc and stone grays, Bootstrap grays and web-safe grays.

Named gray colors (CSS)

Grays in Tailwind CSS and Bootstrap

Web-safe gray colors

Gray color combinations

Five-color schemes built from #6B7280 with color-wheel rules. Click a color to copy it, or open the scheme in the palette generator.

Monochromatic Edit
Complementary Edit
Analogous Edit
Triadic Edit
Soft & muted Edit
High contrast Edit

Grays carry most of an interface: text, borders, dividers, backgrounds and disabled states. A good gray scale matters more than the accent color for how polished a site looks.

Using gray in web design

  • On white, #767676 is the lightest gray that passes AA for body text, so use something darker for paragraphs.
  • Slightly tinted grays (blue-gray "slate", warm "stone") feel more designed than neutral gray.
  • Use the lightest grays (50–200) for backgrounds and borders, and the darkest (700–900) for text.

About this page

The colors above are grouped automatically by hue, saturation and lightness. Click any swatch to copy its HEX code, or open Details to convert it to RGB, HSL, HSV and CMYK in the color picker. To build a full scale from one of these colors, use the tints & shades generator, and check text colors with the contrast checker.