RecolorOpen Recolor

A vivid dark teal, white text passes AA

Tailwind teal-800

Tailwind teal-800 is oklch(43.7% 0.078 188.216) in Tailwind CSS 4.3.3, which is #005f5a as the nearest sRGB hex and rgb(0 95 90). White text on it reaches 7.54:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#005f5ateal-800
From the theme file of Tailwind CSS 4.3.3 (--color-teal-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(43.7% 0.078 188.216)
Hex#005f5a, the nearest color in sRGB
RGBrgb(0 95 90)
HSLhsl(177 100% 19%)
OKLCH of the hexoklch(43.8% 0.076 188.5)
CSS variablevar(--color-teal-800)
Nearest CSS namedarkslategray #2f4f4f, 0.052 away in OKLab
White text7.54:1: AA passes, AAA passes, large text passes
Black text2.78:1: AA fails, AAA fails, large text fails

About teal-800

Tailwind teal-800 is a vivid dark teal: OKLCH lightness 43.7%, chroma 0.078, hue 188.2 degrees. On Tailwind's teal scale it sits between teal-700 at 51.1% and teal-900 at 38.6%.

Its HSL lightness, 19%, says little about how light teal-800 looks; OKLCH, made to match the eye, measures 43.7%, 25 points away. Its value lies outside sRGB, the colors a hex code can name: #005f5a is what CSS Color 4's gamut mapping makes of it, chroma 0.076 instead of 0.078, moving 0.1 points of lightness and 0.3 degrees of hue. A wide-gamut screen shows the stronger original.

White text on teal-800 measures 7.54:1, past the 7:1 of WCAG AAA, while black text manages only 2.78:1. On the teal scale white text works from teal-700 to teal-950; teal-800 has 1 shade of margin.

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

Tints and shades

  1. #d7e3e2
  2. #b0c7c5
  3. #8aaca9
  4. #64928e
  5. #3c7873
  6. #005f5a
  7. #004945
  8. #003431
  9. #00201e
  10. #000e0c
  11. #000202

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. #005f5a
  2. #72c2bf
  3. #271e30
  4. #efddff
  5. #b96f00

Recolor's generator, with teal-800 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #72c2bf, #271e30, #efddff, #b96f00. Open it in Recolor.

Using teal-800

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

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

Common questions

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

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

Is Tailwind teal-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-800: oklch(43.7% 0.078 188.216); #005f5a is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources