RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind neutral-100

Tailwind neutral-100 is oklch(97% 0 none) in Tailwind CSS 4.3.3, which is #f5f5f5 in hex and rgb(245 245 245). Black text on it reaches 19.26:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#f5f5f5neutral-100
From the theme file of Tailwind CSS 4.3.3 (--color-neutral-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97% 0 none)
Hex#f5f5f5
RGBrgb(245 245 245)
HSLhsl(0 0% 96%)
CSS variablevar(--color-neutral-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.000 away in OKLab
White text1.09:1: AA fails, AAA fails, large text fails
Black text19.26:1: AA passes, AAA passes, large text passes

About neutral-100

Tailwind neutral-100 is a pale gray: OKLCH lightness 97.0%, chroma 0.000, no hue. On Tailwind's neutral scale it sits between neutral-50 at 98.5% and neutral-200 at 92.2%.

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

Black text on neutral-100 measures 19.26:1, past the 7:1 of WCAG AAA, while white text manages only 1.09:1. On the neutral scale black text works down to neutral-400, which leaves neutral-100 3 shades of margin.

The CSS keyword whitesmoke (#f5f5f5) is almost the same color: 0.000 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fdfdfd
  2. #fcfcfc
  3. #fafafa
  4. #f8f8f8
  5. #f7f7f7
  6. #f5f5f5
  7. #c0c0c0
  8. #8e8e8e
  9. #5f5f5f
  10. #343434
  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. #f5f5f5
  2. #2f9fbb
  3. #15282e
  4. #a6cada
  5. #385158

Recolor's generator, with neutral-100 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #2f9fbb, #15282e, #a6cada, #385158. Open it in Recolor.

Using neutral-100

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

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

Common questions

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

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

Is Tailwind neutral-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-neutral-100: oklch(97% 0 none); #f5f5f5 is its conversion to sRGB.

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

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

Sources