Shades of grey

CSS accepts both spellings, grey and gray, for every grey it names. Here are 10, from white smoke (#f5f5f5) to dark slate grey (#2f4f4f), with hex codes and the contrast each gives with text.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#f7f7f7White1.1 FailInk16.9 AAA
100#ebebebWhite1.2 FailInk15.2 AAA
200#d7d7d7White1.4 FailInk12.6 AAA
300#bebebeWhite1.9 FailInk9.7 AAA
400#a1a1a1White2.6 FailInk7.0 AAA
500#868686White3.6 AA largeInk5.0 AA
600#6f6f6fWhite5.0 AAInk3.6 AA large
700#585858White7.1 AAAInk2.5 Fail
800#424242White10.0 AAAInk1.8 Fail
900#303030White13.2 AAAInk1.4 Fail
950#1f1f1fWhite16.5 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-grey-50: #f7f7f7;
  --color-grey-100: #ebebeb;
  --color-grey-200: #d7d7d7;
  --color-grey-300: #bebebe;
  --color-grey-400: #a1a1a1;
  --color-grey-500: #868686;
  --color-grey-600: #6f6f6f;
  --color-grey-700: #585858;
  --color-grey-800: #424242;
  --color-grey-900: #303030;
  --color-grey-950: #1f1f1f;
  --color-accent-1: #dedede;
  --color-accent-2: #aeaeae;
  --color-accent-3: #555555;
  --color-accent-4: #2e2e2e;
}

At a glance

White smoke (whitesmoke): #f5f5f5 · white text 1.09:1 (Fail), near-black text 16.59:1 (AAA); Source: w3.org, checked 2026-11
Gainsboro (gainsboro): #dcdcdc · white text 1.37:1 (Fail), near-black text 13.19:1 (AAA); Source: w3.org, checked 2026-11
Light grey (lightgray): #d3d3d3 · white text 1.49:1 (Fail), near-black text 12.08:1 (AAA); Source: w3.org, checked 2026-11
Silver (silver): #c0c0c0 · white text 1.81:1 (Fail), near-black text 9.94:1 (AAA); Source: w3.org, checked 2026-11
Dark grey (darkgray): #a9a9a9 · white text 2.35:1 (Fail), near-black text 7.69:1 (AAA); Source: w3.org, checked 2026-11
Grey (gray): #808080 · white text 3.94:1 (AA large), near-black text 4.58:1 (AA); Source: w3.org, checked 2026-11
Light slate grey (lightslategray): #778899 · white text 3.64:1 (AA large), near-black text 4.96:1 (AA); Source: w3.org, checked 2026-11
Slate grey (slategray): #708090 · white text 4.05:1 (AA large), near-black text 4.46:1 (AA large); Source: w3.org, checked 2026-11
Dim grey (dimgray): #696969 · white text 5.48:1 (AA), near-black text 3.29:1 (AA large); Source: w3.org, checked 2026-11
Dark slate grey (darkslategray): #2f4f4f · white text 8.92:1 (AAA), near-black text 2.02:1 (Fail); Source: w3.org, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of grey: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Which shades of grey can carry text

White body text passes WCAG AA (4.5:1) on 2 of the 10: dim grey (#696969) and dark slate grey (#2f4f4f). Use these for buttons, banners and anything with white type on it.

Near-black text (#161616) passes on 7: white smoke (#f5f5f5), gainsboro (#dcdcdc), light grey (#d3d3d3), silver (#c0c0c0), dark grey (#a9a9a9), grey (#808080) and light slate grey (#778899).

Slate grey (#708090) sits in between: neither white nor near-black text reaches 4.5:1, so keep it for large headings, icons or borders, where WCAG asks for 3:1.

Dark grey is lighter than grey

In CSS, darkgray (#a9a9a9) is lighter than gray (#808080). The CSS spec says plainly that its colour names aren't internally consistent, because they were inherited from older systems. Go by the hex code, not the name.

The lightest grey for text on white

#767676 is the lightest flat grey that passes WCAG AA on white, at 4.54:1. One step lighter, #777777, drops to 4.47:1 and fails. Plain gray (#808080) is 3.94:1, fine for large headings but not body text.

Questions

Is grey a color or a shade?

Grey is a neutral: it has no hue. In colour theory, mixing a colour with grey gives a tone, while mixing with black gives a shade. In everyday speech, people call any variety of grey a shade of grey.

Is it fifty shades of grey or gray?

Both spellings are correct. Grey is the usual British spelling and gray the American one. CSS accepts both, so gray and grey give the same #808080.