RecolorOpen Recolor

A medium bluish gray, white text passes AA

Tailwind zinc-500

Tailwind zinc-500 is oklch(55.2% 0.016 285.938) in Tailwind CSS 4.3.3, which is #71717b in hex and rgb(113 113 123). White text on it reaches 4.83:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#71717bzinc-500
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.2% 0.016 285.938)
Hex#71717b
RGBrgb(113 113 123)
HSLhsl(240 4% 46%)
CSS variablevar(--color-zinc-500)
Nearest CSS namedimgray #696969, 0.035 away in OKLab
White text4.83:1: AA passes, AAA fails, large text passes
Black text4.35:1: AA fails, AAA fails, large text passes

About zinc-500

Tailwind zinc-500 is a medium bluish gray: OKLCH lightness 55.2%, chroma 0.016, hue 285.9 degrees. On Tailwind's zinc scale it sits between zinc-400 at 70.5% and zinc-600 at 44.2%.

HSL calls its lightness 46%, OKLCH 55.2%: 9 points between a formula and a measure of what the eye sees. Its value fits inside sRGB, so #71717b is the same color, not an approximation.

White text on zinc-500 reaches 4.83:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 4.35:1. It is the lightest zinc shade that carries white body text; zinc-400 falls short at 2.62:1.

The closest CSS named color is dimgray (#696969), 0.035 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #e8e5e6
  2. #d1cdce
  3. #bbb4b6
  4. #a59c9e
  5. #8f8588
  6. #71717b
  7. #5f5558
  8. #443d3f
  9. #2b2628
  10. #151212
  11. #030203

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. #71717b
  2. #cbf0de
  3. #634336
  4. #a7aee7
  5. #191a23

Recolor's generator, with zinc-500 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #cbf0de, #634336, #a7aee7, #191a23. Open it in Recolor.

Using zinc-500

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

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

Common questions

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

Yes. White text measures 4.83:1 on zinc-500, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind zinc-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-zinc-500: oklch(55.2% 0.016 285.938); #71717b is its conversion to sRGB.

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

No. The nearest CSS named color is dimgray (#696969), 0.035 away in OKLab.

Sources