RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind neutral-200

In Tailwind CSS 4.3.3, neutral-200 is defined as oklch(92.2% 0 none); in hex that is #e5e5e5, or rgb(229 229 229). Black text on it reaches 16.67:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#e5e5e5neutral-200
From the theme file of Tailwind CSS 4.3.3 (--color-neutral-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.2% 0 none)
Hex#e5e5e5
RGBrgb(229 229 229)
HSLhsl(0 0% 90%)
CSS variablevar(--color-neutral-200)
Nearest CSS namegainsboro #dcdcdc, 0.027 away in OKLab
White text1.26:1: AA fails, AAA fails, large text fails
Black text16.67:1: AA passes, AAA passes, large text passes

About neutral-200

In OKLCH, neutral-200 has a lightness of 92.2%, a chroma of 0.000 and no hue, which makes it a pale gray. The step up to neutral-100 is 4.8 points of lightness, and the step down to neutral-300 5.2 points.

HSL and OKLCH agree on how light it is, 90% and 92.2%. The value lies inside sRGB, the gamut of a hex code, so neutral-200 converts to #e5e5e5 without losing chroma.

For text, neutral-200 wants black: 16.67:1 clears even AAA's 7:1, and white at 1.26:1 fails AA. Black text passes on every neutral shade from neutral-50 to neutral-400, 2 shades darker than neutral-200.

Among the CSS keywords, gainsboro (#dcdcdc) comes closest at 0.027 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #fbfbfb
  2. #f6f6f6
  3. #f2f2f2
  4. #eeeeee
  5. #e9e9e9
  6. #e5e5e5
  7. #b3b3b3
  8. #848484
  9. #585858
  10. #303030
  11. #0c0c0c

From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.

A palette around it

  1. #e5e5e5
  2. #af7f00
  3. #062854
  4. #c4bb4a
  5. #863173

Locked as the first of five swatches, neutral-200 gets #af7f00, #062854, #c4bb4a, #863173 from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using neutral-200

Pair it with text-black, 16.67:1; neutral-200 as text on a black page measures the same ratio. In CSS it is var(--color-neutral-200).

HTML
<a class="bg-neutral-200 text-black" href="/start">Get started</a>
<p class="text-neutral-200">Text in neutral-200</p>

Common questions

Does white text pass WCAG AA on Tailwind neutral-200?

No. White text measures 1.26:1 on neutral-200, under AA's 4.5:1; black text measures 16.67:1 and passes. The lightest neutral shade for white text is neutral-500.

Is Tailwind neutral-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-neutral-200: oklch(92.2% 0 none); #e5e5e5 is its conversion to sRGB.

Is there a CSS named color for Tailwind neutral-200?

No. The nearest CSS named color is gainsboro (#dcdcdc), 0.027 away in OKLab.

Sources