RecolorOpen Recolor

A vivid medium cyan, black text passes AA

Tailwind teal-600

In Tailwind CSS 4.3.3, teal-600 is defined as oklch(60% 0.118 184.704); as the nearest sRGB hex that is #009689, or rgb(0 150 137). Black text on it reaches 5.72:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#009689teal-600
From the theme file of Tailwind CSS 4.3.3 (--color-teal-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(60% 0.118 184.704)
Hex#009689, the nearest color in sRGB
RGBrgb(0 150 137)
HSLhsl(175 100% 29%)
OKLCH of the hexoklch(60.5% 0.107 184.2)
CSS variablevar(--color-teal-600)
Nearest CSS namedarkcyan #008b8b, 0.035 away in OKLab
White text3.67:1: AA fails, AAA fails, large text passes
Black text5.72:1: AA passes, AAA fails, large text passes

About teal-600

In OKLCH, teal-600 has a lightness of 60.0%, a chroma of 0.118 and a hue of 184.7 degrees, which makes it a vivid medium cyan. The step up to teal-500 is 10.4 points of lightness, and the step down to teal-700 8.9 points.

Its HSL lightness, 29%, says little about how light teal-600 looks; OKLCH, made to match the eye, measures 60.0%, 31 points away. Teal-600 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #009689, gives up 0.011 of chroma and moves 0.5 points of lightness and 0.5 degrees of hue; a Display P3 screen shows the full value.

With black text, teal-600 passes AA at 5.72:1. White text, at 3.67:1, does not. Black text holds AA down to here on the teal scale; at teal-700 it falls to 3.92:1.

Among the CSS keywords, darkcyan (#008b8b) comes closest at 0.035 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #ddedea
  2. #bbdcd6
  3. #98cac2
  4. #74b9af
  5. #4ca79c
  6. #009689
  7. #00756a
  8. #00554d
  9. #003731
  10. #001c18
  11. #000504

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. #009689
  2. #ffd2c9
  3. #00716a
  4. #e4b9e0
  5. #002723

Locked as the first of five swatches, teal-600 gets #ffd2c9, #00716a, #e4b9e0, #002723 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-600

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

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

Common questions

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

No. White text measures 3.67:1 on teal-600, under AA's 4.5:1; black text measures 5.72:1 and passes. The lightest teal shade for white text is teal-700.

Is Tailwind teal-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-600: oklch(60% 0.118 184.704); #009689 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is darkcyan (#008b8b), 0.035 away in OKLab.

Sources