RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind zinc-200

Tailwind zinc-200 is oklch(92% 0.004 286.32) in Tailwind CSS 4.3.3, which is #e4e4e7 in hex and rgb(228 228 231). Black text on it reaches 16.55:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#e4e4e7zinc-200
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92% 0.004 286.32)
Hex#e4e4e7
RGBrgb(228 228 231)
HSLhsl(240 6% 90%)
CSS variablevar(--color-zinc-200)
Nearest CSS namelavender #e6e6fa, 0.025 away in OKLab
White text1.27:1: AA fails, AAA fails, large text fails
Black text16.55:1: AA passes, AAA passes, large text passes

About zinc-200

Tailwind zinc-200 is a pale gray: OKLCH lightness 92.0%, chroma 0.004, hue 286.3 degrees. On Tailwind's zinc scale it sits between zinc-100 at 96.7% and zinc-300 at 87.1%.

Here HSL's lightness, 90%, lands near OKLCH's 92.0%, which is not true of every color. Its value fits inside sRGB, so #e4e4e7 is the same color, not an approximation.

Black text on zinc-200 measures 16.55:1, past the 7:1 of WCAG AAA, while white text manages only 1.27:1. On the zinc scale black text works down to zinc-400, which leaves zinc-200 2 shades of margin.

The closest CSS named color is lavender (#e6e6fa), 0.025 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #fbfafa
  2. #f7f6f6
  3. #f3f1f2
  4. #efeced
  5. #ebe8e9
  6. #e4e4e7
  7. #b5b2b3
  8. #858384
  9. #595758
  10. #302f2f
  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. #e4e4e7
  2. #b17668
  3. #1f1e0b
  4. #4acdab
  5. #5d4469

Recolor's generator, with zinc-200 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #b17668, #1f1e0b, #4acdab, #5d4469. Open it in Recolor.

Using zinc-200

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

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

Common questions

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

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

Is Tailwind zinc-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-zinc-200: oklch(92% 0.004 286.32); #e4e4e7 is its conversion to sRGB.

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

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

Sources