RecolorOpen Recolor

A bluish white, black text passes AA

Tailwind slate-100

Tailwind slate-100 is oklch(96.8% 0.007 247.896) in Tailwind CSS 4.3.3, which is #f1f5f9 in hex and rgb(241 245 249). Black text on it reaches 19.17:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#f1f5f9slate-100
From the theme file of Tailwind CSS 4.3.3 (--color-slate-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.8% 0.007 247.896)
Hex#f1f5f9
RGBrgb(241 245 249)
HSLhsl(210 40% 96%)
CSS variablevar(--color-slate-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.007 away in OKLab
White text1.10:1: AA fails, AAA fails, large text fails
Black text19.17:1: AA passes, AAA passes, large text passes

About slate-100

Tailwind slate-100 is a bluish white: OKLCH lightness 96.8%, chroma 0.007, hue 247.9 degrees. On Tailwind's slate scale it sits between slate-50 at 98.4% and slate-200 at 92.9%.

HSL and OKLCH agree on how light it is, 96% and 96.8%. Its value fits inside sRGB, so #f1f5f9 is the same color, not an approximation.

Black text on slate-100 measures 19.17:1, past the 7:1 of WCAG AAA, while white text manages only 1.10:1. Black text passes on every slate shade from slate-50 to slate-400, 3 shades darker than slate-100.

Its nearest CSS named color, whitesmoke (#f5f5f5), is 0.007 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fefdfd
  2. #fdfbfb
  3. #fcf9fa
  4. #fbf7f8
  5. #faf5f6
  6. #f1f5f9
  7. #c3bec0
  8. #908d8e
  9. #605e5f
  10. #353333
  11. #0e0d0d

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. #f1f5f9
  2. #634753
  3. #9ec8e0
  4. #27121a
  5. #2c85b2

Recolor's generator, with slate-100 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #634753, #9ec8e0, #27121a, #2c85b2. Open it in Recolor.

Using slate-100

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

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

Common questions

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

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

Is Tailwind slate-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-slate-100: oklch(96.8% 0.007 247.896); #f1f5f9 is its conversion to sRGB.

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

Yes, nearly: whitesmoke (#f5f5f5) is 0.007 away in OKLab, too close to tell apart by eye.

Sources