RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind taupe-100

The hex code of Tailwind taupe-100 is #f3f1f1 (rgb(243 241 241)), from its Tailwind CSS 4.3.3 value oklch(96% 0.002 17.2). Black text on it reaches 18.66:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f3f1f1taupe-100
From the theme file of Tailwind CSS 4.3.3 (--color-taupe-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96% 0.002 17.2)
Hex#f3f1f1
RGBrgb(243 241 241)
HSLhsl(0 8% 95%)
CSS variablevar(--color-taupe-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.011 away in OKLab
White text1.13:1: AA fails, AAA fails, large text fails
Black text18.66:1: AA passes, AAA passes, large text passes

About taupe-100

Read as numbers, taupe-100 is lightness 96.0%, chroma 0.002 and hue 17.2 degrees; read by eye, it is a pale gray. Its neighbors on the taupe scale are taupe-50, 2.6 points lighter, and taupe-200, 3.8 points darker.

HSL and OKLCH agree on how light it is, 95% and 96.0%. No gamut mapping is needed here: oklch(96% 0.002 17.2) sits inside sRGB and #f3f1f1 matches it.

Black on taupe-100 reads at 18.66:1, enough for AAA body text; white reaches 1.13:1 and should stay off it. Black text passes on every taupe shade from taupe-50 to taupe-400, 3 shades darker than taupe-100.

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

Tints and shades

  1. #fdfdfd
  2. #fbfafa
  3. #f9f8f8
  4. #f7f6f6
  5. #f5f3f4
  6. #f3f1f1
  7. #bfbdbd
  8. #8d8c8c
  9. #5e5d5d
  10. #333333
  11. #0d0d0d

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. #f3f1f1
  2. #3a8a8e
  3. #331f1f
  4. #d9a2a2
  5. #3a6764

Around taupe-100 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #3a8a8e, #331f1f, #d9a2a2, #3a6764, drawn from a seed fixed by its hex. Open it in Recolor.

Using taupe-100

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

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

Common questions

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

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

Is Tailwind taupe-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-taupe-100: oklch(96% 0.002 17.2); #f3f1f1 is its conversion to sRGB.

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

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

Sources