RecolorOpen Recolor

A dark bluish gray, white text passes AA

Tailwind zinc-600

In Tailwind CSS 4.3.3, zinc-600 is defined as oklch(44.2% 0.017 285.786); in hex that is #52525c, or rgb(82 82 92). White text on it reaches 7.72:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#52525czinc-600
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(44.2% 0.017 285.786)
Hex#52525c
RGBrgb(82 82 92)
HSLhsl(240 6% 34%)
CSS variablevar(--color-zinc-600)
Nearest CSS namedarkslategray #2f4f4f, 0.057 away in OKLab
White text7.72:1: AA passes, AAA passes, large text passes
Black text2.72:1: AA fails, AAA fails, large text fails

About zinc-600

In OKLCH, zinc-600 has a lightness of 44.2%, a chroma of 0.017 and a hue of 285.8 degrees, which makes it a dark bluish gray. The step up to zinc-500 is 11.0 points of lightness, and the step down to zinc-700 7.2 points.

Its lightness is 34% in HSL and 44.2% in OKLCH, 10 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so zinc-600 converts to #52525c without losing chroma.

For text, zinc-600 wants white: 7.72:1 clears even AAA's 7:1, and black at 2.72:1 fails AA. On the zinc scale white text works from zinc-500 to zinc-950; zinc-600 has 1 shade of margin.

No CSS keyword matches it; darkslategray (#2f4f4f) is the nearest, 0.057 away in OKLab, a clear step off.

Tints and shades

  1. #e2dfe0
  2. #c5c1c2
  3. #aaa3a5
  4. #8f8688
  5. #746a6d
  6. #52525c
  7. #463c3f
  8. #312a2c
  9. #1e191b
  10. #0d0a0a
  11. #020101

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. #52525c
  2. #7bd3de
  3. #00333e
  4. #adf5fa
  5. #00a5af

Locked as the first of five swatches, zinc-600 gets #7bd3de, #00333e, #adf5fa, #00a5af 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-600

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

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

Common questions

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

Yes. White text measures 7.72:1 on zinc-600, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind zinc-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-zinc-600: oklch(44.2% 0.017 285.786); #52525c is its conversion to sRGB.

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

No. The nearest CSS named color is darkslategray (#2f4f4f), 0.057 away in OKLab.

Sources