RecolorOpen Recolor

A pale bluish gray, black text passes AA

Tailwind gray-200

The hex code of Tailwind gray-200 is #e5e7eb (rgb(229 231 235)), from its Tailwind CSS 4.3.3 value oklch(92.8% 0.006 264.531). Black text on it reaches 16.96:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#e5e7ebgray-200
From the theme file of Tailwind CSS 4.3.3 (--color-gray-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.8% 0.006 264.531)
Hex#e5e7eb
RGBrgb(229 231 235)
HSLhsl(220 13% 91%)
CSS variablevar(--color-gray-200)
Nearest CSS namelavender #e6e6fa, 0.022 away in OKLab
White text1.24:1: AA fails, AAA fails, large text fails
Black text16.96:1: AA passes, AAA passes, large text passes

About gray-200

Read as numbers, gray-200 is lightness 92.8%, chroma 0.006 and hue 264.5 degrees; read by eye, it is a pale bluish gray. Its neighbors on the gray scale are gray-100, 3.9 points lighter, and gray-300, 5.6 points darker.

HSL and OKLCH agree on how light it is, 91% and 92.8%. No gamut mapping is needed here: oklch(92.8% 0.006 264.531) sits inside sRGB and #e5e7eb matches it.

Black on gray-200 reads at 16.96:1, enough for AAA body text; white reaches 1.24:1 and should stay off it. Black text passes on every gray shade from gray-50 to gray-400, 2 shades darker than gray-200.

Of the named colors, lavender (#e6e6fa) is the nearest, 0.022 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fcfbfb
  2. #f8f6f7
  3. #f5f2f3
  4. #f1eeef
  5. #eeeaeb
  6. #e5e7eb
  7. #b8b4b5
  8. #888585
  9. #5a5859
  10. #313030
  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. #e5e7eb
  2. #744957
  3. #54c1e1
  4. #292740
  5. #978600

Around gray-200 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #744957, #54c1e1, #292740, #978600, drawn from a seed fixed by its hex. Open it in Recolor.

Using gray-200

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

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

Common questions

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

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

Is Tailwind gray-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-200: oklch(92.8% 0.006 264.531); #e5e7eb is its conversion to sRGB.

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

No. The nearest CSS named color is lavender (#e6e6fa), 0.022 away in OKLab.

Sources