RecolorOpen Recolor

A grayish very dark blue, white text passes AA

Tailwind gray-800

The hex code of Tailwind gray-800 is #1e2939 (rgb(30 41 57)), from its Tailwind CSS 4.3.3 value oklch(27.8% 0.033 256.848). White text on it reaches 14.67:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#1e2939gray-800
From the theme file of Tailwind CSS 4.3.3 (--color-gray-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(27.8% 0.033 256.848)
Hex#1e2939
RGBrgb(30 41 57)
HSLhsl(216 31% 17%)
CSS variablevar(--color-gray-800)
Nearest CSS namemidnightblue #191970, 0.112 away in OKLab
White text14.67:1: AA passes, AAA passes, large text passes
Black text1.43:1: AA fails, AAA fails, large text fails

About gray-800

Read as numbers, gray-800 is lightness 27.8%, chroma 0.033 and hue 256.8 degrees; read by eye, it is a grayish very dark blue. Its neighbors on the gray scale are gray-700, 9.5 points lighter, and gray-900, 6.8 points darker.

HSL calls its lightness 17%, OKLCH 27.8%: 11 points between a formula and a measure of what the eye sees. No gamut mapping is needed here: oklch(27.8% 0.033 256.848) sits inside sRGB and #1e2939 matches it.

White on gray-800 reads at 14.67:1, enough for AAA body text; black reaches 1.43:1 and should stay off it. White text passes on every gray shade from gray-500 down, so gray-800 is 3 shades past the line.

No CSS named color comes near it: the closest, midnightblue (#191970), is 0.112 away in OKLab.

Tints and shades

  1. #d5d7db
  2. #adb1b8
  3. #868c96
  4. #616976
  5. #3e4857
  6. #1e2939
  7. #151e2b
  8. #0c131d
  9. #050910
  10. #020305
  11. #000001

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. #1e2939
  2. #9f86b1
  3. #fce0f9
  4. #76476a
  5. #fb88b4

Around gray-800 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #9f86b1, #fce0f9, #76476a, #fb88b4, drawn from a seed fixed by its hex. Open it in Recolor.

Using gray-800

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

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

Common questions

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

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

Is Tailwind gray-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-gray-800: oklch(27.8% 0.033 256.848); #1e2939 is its conversion to sRGB.

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

No. The nearest CSS named color is midnightblue (#191970), 0.112 away in OKLab.

Sources