RecolorOpen Recolor

A vivid dark teal, white text passes AA

Tailwind teal-900

In Tailwind CSS 4.3.3, teal-900 is defined as oklch(38.6% 0.063 188.416); in hex that is #0b4f4a, or rgb(11 79 74). White text on it reaches 9.41:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#0b4f4ateal-900
From the theme file of Tailwind CSS 4.3.3 (--color-teal-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(38.6% 0.063 188.416)
Hex#0b4f4a
RGBrgb(11 79 74)
HSLhsl(176 76% 18%)
CSS variablevar(--color-teal-900)
Nearest CSS namedarkslategray #2f4f4f, 0.031 away in OKLab
White text9.41:1: AA passes, AAA passes, large text passes
Black text2.23:1: AA fails, AAA fails, large text fails

About teal-900

In OKLCH, teal-900 has a lightness of 38.6%, a chroma of 0.063 and a hue of 188.4 degrees, which makes it a vivid dark teal. The step up to teal-800 is 5.1 points of lightness, and the step down to teal-950 10.9 points.

HSL puts its lightness at 18% and OKLCH at 38.6%, 21 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. The value lies inside sRGB, the gamut of a hex code, so teal-900 converts to #0b4f4a without losing chroma.

For text, teal-900 wants white: 9.41:1 clears even AAA's 7:1, and black at 2.23:1 fails AA. White text passes on every teal shade from teal-700 down, so teal-900 is 2 shades past the line.

Among the CSS keywords, darkslategray (#2f4f4f) comes closest at 0.031 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #d6e0de
  2. #aec1bf
  3. #87a3a0
  4. #618682
  5. #3a6a65
  6. #0b4f4a
  7. #063c38
  8. #032a27
  9. #011917
  10. #000a08
  11. #000101

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. #0b4f4a
  2. #78c4c0
  3. #2e1124
  4. #fcd5ee
  5. #5f9c96

Locked as the first of five swatches, teal-900 gets #78c4c0, #2e1124, #fcd5ee, #5f9c96 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using teal-900

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

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

Common questions

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

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

Is Tailwind teal-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-900: oklch(38.6% 0.063 188.416); #0b4f4a is its conversion to sRGB.

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

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

Sources