RecolorOpen Recolor

A vivid medium cyan, black text passes AA

Tailwind cyan-500

In Tailwind CSS 4.3.3, cyan-500 is defined as oklch(71.5% 0.143 215.221); as the nearest sRGB hex that is #00b8db, or rgb(0 184 219). Black text on it reaches 8.88:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#00b8dbcyan-500
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(71.5% 0.143 215.221)
Hex#00b8db, the nearest color in sRGB
RGBrgb(0 184 219)
HSLhsl(190 100% 43%)
OKLCH of the hexoklch(72.2% 0.130 218.0)
CSS variablevar(--color-cyan-500)
Nearest CSS namedeepskyblue #00bfff, 0.053 away in OKLab
White text2.37:1: AA fails, AAA fails, large text fails
Black text8.88:1: AA passes, AAA passes, large text passes

About cyan-500

In OKLCH, cyan-500 has a lightness of 71.5%, a chroma of 0.143 and a hue of 215.2 degrees, which makes it a vivid medium cyan. The step up to cyan-400 is 7.4 points of lightness, and the step down to cyan-600 10.6 points.

Its HSL lightness, 43%, says little about how light cyan-500 looks; OKLCH, made to match the eye, measures 71.5%, 29 points away. Cyan-500 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #00b8db, gives up 0.013 of chroma and moves 0.7 points of lightness and 2.7 degrees of hue; a Display P3 screen shows the full value.

For text, cyan-500 wants black: 8.88:1 clears even AAA's 7:1, and white at 2.37:1 fails AA. On the cyan scale black text works down to cyan-600, which leaves cyan-500 1 shade of margin.

No CSS keyword matches it; deepskyblue (#00bfff) is the nearest, 0.053 away in OKLab, a clear step off.

Tints and shades

  1. #e1f4f9
  2. #c1e8f4
  3. #a1dcee
  4. #7ed0e8
  5. #55c4e1
  6. #00b8db
  7. #0090ac
  8. #00697e
  9. #004554
  10. #00242d
  11. #00070b

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. #00b8db
  2. #794f59
  3. #ffe0e8
  4. #518695
  5. #271e16

Locked as the first of five swatches, cyan-500 gets #794f59, #ffe0e8, #518695, #271e16 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 cyan-500

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

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

Common questions

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

No. White text measures 2.37:1 on cyan-500, under AA's 4.5:1; black text measures 8.88:1 and passes. The lightest cyan shade for white text is cyan-700.

Is Tailwind cyan-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-500: oklch(71.5% 0.143 215.221); #00b8db is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is deepskyblue (#00bfff), 0.053 away in OKLab.

Sources