RecolorOpen Recolor

A vivid dark teal, white text passes AA

Tailwind cyan-900

The hex code of Tailwind cyan-900 is #104e64 (rgb(16 78 100)), from its Tailwind CSS 4.3.3 value oklch(39.8% 0.07 227.392). White text on it reaches 9.15:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#104e64cyan-900
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(39.8% 0.07 227.392)
Hex#104e64
RGBrgb(16 78 100)
HSLhsl(196 72% 23%)
CSS variablevar(--color-cyan-900)
Nearest CSS namedarkslategray #2f4f4f, 0.043 away in OKLab
White text9.15:1: AA passes, AAA passes, large text passes
Black text2.30:1: AA fails, AAA fails, large text fails

About cyan-900

Read as numbers, cyan-900 is lightness 39.8%, chroma 0.070 and hue 227.4 degrees; read by eye, it is a vivid dark teal. Its neighbors on the cyan scale are cyan-800, 5.2 points lighter, and cyan-950, 9.6 points darker.

Its HSL lightness, 23%, says little about how light cyan-900 looks; OKLCH, made to match the eye, measures 39.8%, 17 points away. No gamut mapping is needed here: oklch(39.8% 0.07 227.392) sits inside sRGB and #104e64 matches it.

White on cyan-900 reads at 9.15:1, enough for AAA body text; black reaches 2.30:1 and should stay off it. On the cyan scale white text works from cyan-700 to cyan-950; cyan-900 has 2 shades of margin.

Of the named colors, darkslategray (#2f4f4f) is the nearest, 0.043 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #d6e0e4
  2. #afc1c9
  3. #88a3af
  4. #628695
  5. #3c697c
  6. #104e64
  7. #0a3b4d
  8. #052937
  9. #021922
  10. #01090f
  11. #000102

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. #104e64
  2. #74c8dc
  3. #00283c
  4. #1a8aeb
  5. #cae2ff

Around cyan-900 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #74c8dc, #00283c, #1a8aeb, #cae2ff, drawn from a seed fixed by its hex. Open it in Recolor.

Using cyan-900

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

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

Common questions

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

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

Is Tailwind cyan-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-900: oklch(39.8% 0.07 227.392); #104e64 is its conversion to sRGB.

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

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

Sources