RecolorOpen Recolor

A pale gray, black text passes AA

Tailwind zinc-100

The hex code of Tailwind zinc-100 is #f4f4f5 (rgb(244 244 245)), from its Tailwind CSS 4.3.3 value oklch(96.7% 0.001 286.375). Black text on it reaches 19.11:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#f4f4f5zinc-100
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.7% 0.001 286.375)
Hex#f4f4f5
RGBrgb(244 244 245)
HSLhsl(240 5% 96%)
CSS variablevar(--color-zinc-100)
Nearest CSS namewhitesmoke #f5f5f5, 0.003 away in OKLab
White text1.10:1: AA fails, AAA fails, large text fails
Black text19.11:1: AA passes, AAA passes, large text passes

About zinc-100

Read as numbers, zinc-100 is lightness 96.7%, chroma 0.001 and no hue; read by eye, it is a pale gray. Its neighbors on the zinc scale are zinc-50, 1.8 points lighter, and zinc-200, 4.7 points darker.

HSL and OKLCH agree on how light it is, 96% and 96.7%. No gamut mapping is needed here: oklch(96.7% 0.001 286.375) sits inside sRGB and #f4f4f5 matches it.

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

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

Tints and shades

  1. #fdfdfd
  2. #fcfbfb
  3. #faf9fa
  4. #f8f7f8
  5. #f7f6f6
  6. #f4f4f5
  7. #c0bfbf
  8. #8e8d8d
  9. #5f5e5e
  10. #343333
  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. #f4f4f5
  2. #6078b6
  3. #2f1925
  4. #accf95
  5. #89462a

Around zinc-100 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #6078b6, #2f1925, #accf95, #89462a, drawn from a seed fixed by its hex. Open it in Recolor.

Using zinc-100

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

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

Common questions

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

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

Is Tailwind zinc-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-zinc-100: oklch(96.7% 0.001 286.375); #f4f4f5 is its conversion to sRGB.

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

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

Sources