RecolorOpen Recolor

A vivid medium teal, white text passes AA

Tailwind teal-700

The hex code of Tailwind teal-700 is #00786f (rgb(0 120 111)), from its Tailwind CSS 4.3.3 value oklch(51.1% 0.096 186.391). White text on it reaches 5.36:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#00786fteal-700
From the theme file of Tailwind CSS 4.3.3 (--color-teal-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(51.1% 0.096 186.391)
Hex#00786f, the nearest color in sRGB
RGBrgb(0 120 111)
HSLhsl(176 100% 24%)
OKLCH of the hexoklch(51.5% 0.090 185.7)
CSS variablevar(--color-teal-700)
Nearest CSS nameteal #008080, 0.032 away in OKLab
White text5.36:1: AA passes, AAA fails, large text passes
Black text3.92:1: AA fails, AAA fails, large text passes

About teal-700

Read as numbers, teal-700 is lightness 51.1%, chroma 0.096 and hue 186.4 degrees; read by eye, it is a vivid medium teal. Its neighbors on the teal scale are teal-600, 8.9 points lighter, and teal-800, 7.4 points darker.

HSL puts its lightness at 24% and OKLCH at 51.1%, 28 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. A hex code cannot hold teal-700 exactly: the value is outside sRGB, and #00786f is the CSS Color 4 gamut mapping of it, chroma lowered by 0.006, 0.4 points of lightness and 0.7 degrees of hue away from the value.

White is the ink for teal-700: 5.36:1 passes AA for body text, where black stops at 3.92:1. It is the lightest teal shade that carries white body text; teal-600 falls short at 3.67:1.

Of the named colors, teal (#008080) is the nearest, 0.032 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #dae8e6
  2. #b5d1cd
  3. #91bab4
  4. #6ba49d
  5. #438e85
  6. #00786f
  7. #005d56
  8. #00433d
  9. #002a27
  10. #001412
  11. #000302

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. #00786f
  2. #93f4ee
  3. #d36f00
  4. #2f1a44
  5. #a4cfc7

Around teal-700 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #93f4ee, #d36f00, #2f1a44, #a4cfc7, drawn from a seed fixed by its hex. Open it in Recolor.

Using teal-700

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

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

Common questions

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

Yes. White text measures 5.36:1 on teal-700, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind teal-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-teal-700: oklch(51.1% 0.096 186.391); #00786f is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is teal (#008080), 0.032 away in OKLab.

Sources