RecolorOpen Recolor

A pale blue, black text passes AA

Tailwind slate-200

In Tailwind CSS 4.3.3, slate-200 is defined as oklch(92.9% 0.013 255.508); in hex that is #e2e8f0, or rgb(226 232 240). Black text on it reaches 17.03:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#e2e8f0slate-200
From the theme file of Tailwind CSS 4.3.3 (--color-slate-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(92.9% 0.013 255.508)
Hex#e2e8f0
RGBrgb(226 232 240)
HSLhsl(214 32% 91%)
CSS variablevar(--color-slate-200)
Nearest CSS namelavender #e6e6fa, 0.017 away in OKLab
White text1.23:1: AA fails, AAA fails, large text fails
Black text17.03:1: AA passes, AAA passes, large text passes

About slate-200

In OKLCH, slate-200 has a lightness of 92.9%, a chroma of 0.013 and a hue of 255.5 degrees, which makes it a pale blue. The step up to slate-100 is 3.9 points of lightness, and the step down to slate-300 6.0 points.

Here HSL's lightness, 91%, lands near OKLCH's 92.9%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so slate-200 converts to #e2e8f0 without losing chroma.

For text, slate-200 wants black: 17.03:1 clears even AAA's 7:1, and white at 1.23:1 fails AA. On the slate scale black text works down to slate-400, which leaves slate-200 2 shades of margin.

The CSS keyword lavender (#e6e6fa) is almost the same color: 0.017 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fcfafb
  2. #faf6f7
  3. #f7f1f3
  4. #f4edef
  5. #f2e9eb
  6. #e2e8f0
  7. #bcb3b5
  8. #8b8486
  9. #5c5859
  10. #322f30
  11. #0d0c0c

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. #e2e8f0
  2. #7589cd
  3. #34261b
  4. #63d8e6
  5. #864406

Locked as the first of five swatches, slate-200 gets #7589cd, #34261b, #63d8e6, #864406 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using slate-200

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

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

Common questions

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

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

Is Tailwind slate-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-200: oklch(92.9% 0.013 255.508); #e2e8f0 is its conversion to sRGB.

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

Yes, nearly: lavender (#e6e6fa) is 0.017 away in OKLab, too close to tell apart by eye.

Sources