What is the hex code for gray?

The CSS keyword gray is #808080, which is rgb(128 128 128) or oklch(0.6 0 0). Tailwind's gray-500 is #6A7282, a softer gray that many design systems use instead.

How many shades of gray have CSS color names?

This page lists 10 CSS named colors in the gray family, from whitesmoke (#F5F5F5) at the light end to darkslategray (#2F4F4F) at the dark end. Every one can be used directly in CSS by name.

What colors go well with gray?

Gray pairs well with blue, red and yellow. For a guaranteed match, open any gray shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.

How do I make a gray color scale for my design system?

Pick a gray you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Shades of gray

Gray does most of the work in any interface: text, borders, surfaces and disabled states. True grays have zero chroma, while slate, zinc and stone add a hint of blue or warmth.

gray · #808080

10 gray color names

Every CSS named color in the gray family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

whitesmoke#f5f5f5rgb(245 245 245)oklch(0.97 0 0)gainsboro#dcdcdcrgb(220 220 220)oklch(0.894 0 0)lightgray#d3d3d3rgb(211 211 211)oklch(0.867 0 0)silver#c0c0c0rgb(192 192 192)oklch(0.808 0 0)darkgray#a9a9a9rgb(169 169 169)oklch(0.735 0 0)lightslategray#778899rgb(119 136 153)oklch(0.619 0.032 248.4)gray#808080rgb(128 128 128)oklch(0.6 0 0)slategray#708090rgb(112 128 144)oklch(0.593 0.031 248.3)dimgray#696969rgb(105 105 105)oklch(0.521 0 0)darkslategray#2f4f4frgb(47 79 79)oklch(0.403 0.038 195.8)

Tailwind gray scales

The Tailwind v4 default palette families closest to gray, 50 to 950.

gray

50 100 200 300 400 500 600 700 800 900 950

slate

50 100 200 300 400 500 600 700 800 900 950

zinc

50 100 200 300 400 500 600 700 800 900 950

neutral

50 100 200 300 400 500 600 700 800 900 950

stone

50 100 200 300 400 500 600 700 800 900 950

Using gray in a UI

Pick a gray tinted toward your brand hue for a cohesive system. Note that CSS darkgray (#A9A9A9) is actually lighter than gray (#808080), a quirk inherited from X11.

gray-colors.css

:root {
  --whitesmoke: oklch(0.97 0 0); /* #f5f5f5 */
  --gainsboro: oklch(0.894 0 0); /* #dcdcdc */
  --lightgray: oklch(0.867 0 0); /* #d3d3d3 */
  --silver: oklch(0.808 0 0); /* #c0c0c0 */
  --darkgray: oklch(0.735 0 0); /* #a9a9a9 */
  --lightslategray: oklch(0.619 0.032 248.4); /* #778899 */
  --gray: oklch(0.6 0 0); /* #808080 */
  --slategray: oklch(0.593 0.031 248.3); /* #708090 */
  --dimgray: oklch(0.521 0 0); /* #696969 */
  --darkslategray: oklch(0.403 0.038 195.8); /* #2f4f4f */
}

Generate a gray scale Build a palette

Frequently asked questions

What is the hex code for gray?: The CSS keyword gray is #808080, which is rgb(128 128 128) or oklch(0.6 0 0). Tailwind's gray-500 is #6A7282, a softer gray that many design systems use instead.
How many shades of gray have CSS color names?: This page lists 10 CSS named colors in the gray family, from whitesmoke (#F5F5F5) at the light end to darkslategray (#2F4F4F) at the dark end. Every one can be used directly in CSS by name.
What colors go well with gray?: Gray pairs well with blue, red and yellow. For a guaranteed match, open any gray shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a gray color scale for my design system?: Pick a gray you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

Red Orange Yellow Green Teal Blue Purple Pink Brown White