RecolorOpen Recolor

A pale cyan, black text passes AA

Tailwind cyan-200

In Tailwind CSS 4.3.3, cyan-200 is defined as oklch(91.7% 0.08 205.041); in hex that is #a2f4fd, or rgb(162 244 253). Black text on it reaches 16.89:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#a2f4fdcyan-200
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(91.7% 0.08 205.041)
Hex#a2f4fd
RGBrgb(162 244 253)
HSLhsl(186 96% 81%)
CSS variablevar(--color-cyan-200)
Nearest CSS namepaleturquoise #afeeee, 0.023 away in OKLab
White text1.24:1: AA fails, AAA fails, large text fails
Black text16.89:1: AA passes, AAA passes, large text passes

About cyan-200

In OKLCH, cyan-200 has a lightness of 91.7%, a chroma of 0.080 and a hue of 205.0 degrees, which makes it a pale cyan. The step up to cyan-100 is 3.9 points of lightness, and the step down to cyan-300 5.2 points.

HSL calls its lightness 81%, OKLCH 91.7%: 10 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so cyan-200 converts to #a2f4fd without losing chroma.

For text, cyan-200 wants black: 16.89:1 clears even AAA's 7:1, and white at 1.24:1 fails AA. Black text passes on every cyan shade from cyan-50 to cyan-600, 4 shades darker than cyan-200.

Among the CSS keywords, paleturquoise (#afeeee) comes closest at 0.023 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #f1fdff
  2. #e2fcfe
  3. #d3fafe
  4. #c4f8fe
  5. #b3f6fd
  6. #a2f4fd
  7. #7ebfc7
  8. #5c8d93
  9. #3c5e62
  10. #1f3336
  11. #060d0e

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. #a2f4fd
  2. #1c938a
  3. #012325
  4. #a1bfcd
  5. #2b527d

Locked as the first of five swatches, cyan-200 gets #1c938a, #012325, #a1bfcd, #2b527d from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using cyan-200

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

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

Common questions

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

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

Is Tailwind cyan-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-200: oklch(91.7% 0.08 205.041); #a2f4fd is its conversion to sRGB.

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

No. The nearest CSS named color is paleturquoise (#afeeee), 0.023 away in OKLab.

Sources