RecolorOpen Recolor

A light bluish gray, black text passes AA

Tailwind zinc-300

In Tailwind CSS 4.3.3, zinc-300 is defined as oklch(87.1% 0.006 286.286); in hex that is #d4d4d8, or rgb(212 212 216). Black text on it reaches 14.21:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#d4d4d8zinc-300
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(87.1% 0.006 286.286)
Hex#d4d4d8
RGBrgb(212 212 216)
HSLhsl(240 5% 84%)
CSS variablevar(--color-zinc-300)
Nearest CSS namelightgray #d3d3d3, 0.007 away in OKLab
White text1.48:1: AA fails, AAA fails, large text fails
Black text14.21:1: AA passes, AAA passes, large text passes

About zinc-300

In OKLCH, zinc-300 has a lightness of 87.1%, a chroma of 0.006 and a hue of 286.3 degrees, which makes it a light bluish gray. The step up to zinc-200 is 4.9 points of lightness, and the step down to zinc-400 16.6 points.

HSL and OKLCH agree on how light it is, 84% and 87.1%. The value lies inside sRGB, the gamut of a hex code, so zinc-300 converts to #d4d4d8 without losing chroma.

For text, zinc-300 wants black: 14.21:1 clears even AAA's 7:1, and white at 1.48:1 fails AA. Black text passes on every zinc shade from zinc-50 to zinc-400, 1 shade darker than zinc-300.

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

Tints and shades

  1. #f8f8f8
  2. #f2f0f1
  3. #ebe9e9
  4. #e5e2e2
  5. #dedadb
  6. #d4d4d8
  7. #a9a5a6
  8. #7c7a7a
  9. #535151
  10. #2c2b2b
  11. #0a0a0a

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. #d4d4d8
  2. #634a44
  3. #e3b8af
  4. #3a1e15
  5. #957169

Locked as the first of five swatches, zinc-300 gets #634a44, #e3b8af, #3a1e15, #957169 from Recolor's generator, a monochromatic palette, one hue in five lightnesses. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using zinc-300

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

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

Common questions

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

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

Is Tailwind zinc-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-zinc-300: oklch(87.1% 0.006 286.286); #d4d4d8 is its conversion to sRGB.

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

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

Sources