RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind slate-50

The hex code of Tailwind slate-50 is #f8fafc (rgb(248 250 252)), from its Tailwind CSS 4.3.3 value oklch(98.4% 0.003 247.858). Black text on it reaches 20.07:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f8fafcslate-50
From the theme file of Tailwind CSS 4.3.3 (--color-slate-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.4% 0.003 247.858)
Hex#f8fafc
RGBrgb(248 250 252)
HSLhsl(210 40% 98%)
CSS variablevar(--color-slate-50)
Nearest CSS nameghostwhite #f8f8ff, 0.008 away in OKLab
White text1.05:1: AA fails, AAA fails, large text fails
Black text20.07:1: AA passes, AAA passes, large text passes

About slate-50

Read as numbers, slate-50 is lightness 98.4%, chroma 0.003 and hue 247.9 degrees; read by eye, it is a pale gray. As the first of the eleven slate shades it sits closest to white, 1.6 points below it and 1.6 points above slate-100.

Here HSL's lightness, 98%, lands near OKLCH's 98.4%, which is not true of every color. No gamut mapping is needed here: oklch(98.4% 0.003 247.858) sits inside sRGB and #f8fafc matches it.

Black on slate-50 reads at 20.07:1, enough for AAA body text; white reaches 1.05:1 and should stay off it. On the slate scale black text works down to slate-400, which leaves slate-50 4 shades of margin.

The CSS keyword ghostwhite (#f8f8ff) is almost the same color: 0.008 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fefefe
  2. #fefdfd
  3. #fdfcfc
  4. #fdfbfb
  5. #fcfafa
  6. #f8fafc
  7. #c6c3c4
  8. #929091
  9. #626061
  10. #353535
  11. #0e0e0e

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. #f8fafc
  2. #625d0b
  3. #b9b2e5
  4. #221f47
  5. #928abe

Around slate-50 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #625d0b, #b9b2e5, #221f47, #928abe, drawn from a seed fixed by its hex. Open it in Recolor.

Using slate-50

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

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

Common questions

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

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

Is Tailwind slate-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-50: oklch(98.4% 0.003 247.858); #f8fafc is its conversion to sRGB.

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

Yes, nearly: ghostwhite (#f8f8ff) is 0.008 away in OKLab, too close to tell apart by eye.

Sources