RecolorOpen Recolor

A very dark bluish gray, white text passes AA

Tailwind zinc-800

Tailwind zinc-800 is oklch(27.4% 0.006 286.033) in Tailwind CSS 4.3.3, which is #27272a in hex and rgb(39 39 42). White text on it reaches 14.89:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#27272azinc-800
From the theme file of Tailwind CSS 4.3.3 (--color-zinc-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(27.4% 0.006 286.033)
Hex#27272a
RGBrgb(39 39 42)
HSLhsl(240 4% 16%)
CSS variablevar(--color-zinc-800)
Nearest CSS namedarkslategray #2f4f4f, 0.135 away in OKLab
White text14.89:1: AA passes, AAA passes, large text passes
Black text1.41:1: AA fails, AAA fails, large text fails

About zinc-800

Tailwind zinc-800 is a very dark bluish gray: OKLCH lightness 27.4%, chroma 0.006, hue 286.0 degrees. On Tailwind's zinc scale it sits between zinc-700 at 37.0% and zinc-900 at 21.0%.

Its lightness is 16% in HSL and 27.4% in OKLCH, 12 points apart; only the second tracks how light it looks. Its value fits inside sRGB, so #27272a is the same color, not an approximation.

White text on zinc-800 measures 14.89:1, past the 7:1 of WCAG AAA, while black text manages only 1.41:1. On the zinc scale white text works from zinc-500 to zinc-950; zinc-800 has 3 shades of margin.

CSS has no keyword in its neighborhood; darkslategray (#2f4f4f) is the nearest, a long 0.135 away in OKLab.

Tints and shades

  1. #d8d7d7
  2. #b1b0b0
  3. #8d8a8b
  4. #6a6768
  5. #494546
  6. #27272a
  7. #1e1c1c
  8. #141112
  9. #090808
  10. #030202

From light to dark: 5 toward white and 4 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. #27272a
  2. #faaeca
  3. #6a3d50
  4. #ecfaec
  5. #4b999f

Recolor's generator, with zinc-800 locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #faaeca, #6a3d50, #ecfaec, #4b999f. Open it in Recolor.

Using zinc-800

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

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

Common questions

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

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

Is Tailwind zinc-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-zinc-800: oklch(27.4% 0.006 286.033); #27272a is its conversion to sRGB.

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

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

Sources