RecolorOpen Recolor

A vivid light cyan, black text passes AA

Tailwind cyan-400

Tailwind cyan-400 is oklch(78.9% 0.154 211.53) in Tailwind CSS 4.3.3, which is #00d3f2 as the nearest sRGB hex and rgb(0 211 242). Black text on it reaches 11.60:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#00d3f2cyan-400
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(78.9% 0.154 211.53)
Hex#00d3f2, the nearest color in sRGB
RGBrgb(0 211 242)
HSLhsl(188 100% 47%)
OKLCH of the hexoklch(79.7% 0.140 213.2)
CSS variablevar(--color-cyan-400)
Nearest CSS namedarkturquoise #00ced1, 0.047 away in OKLab
White text1.81:1: AA fails, AAA fails, large text fails
Black text11.60:1: AA passes, AAA passes, large text passes

About cyan-400

Tailwind cyan-400 is a vivid light cyan: OKLCH lightness 78.9%, chroma 0.154, hue 211.5 degrees. On Tailwind's cyan scale it sits between cyan-300 at 86.5% and cyan-500 at 71.5%.

HSL puts its lightness at 47% and OKLCH at 78.9%, 31 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Its value lies outside sRGB, the colors a hex code can name: #00d3f2 is what CSS Color 4's gamut mapping makes of it, chroma 0.140 instead of 0.154, moving 0.8 points of lightness and 1.7 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on cyan-400 measures 11.60:1, past the 7:1 of WCAG AAA, while white text manages only 1.81:1. Black text passes on every cyan shade from cyan-50 to cyan-600, 2 shades darker than cyan-400.

The closest CSS named color is darkturquoise (#00ced1), 0.047 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #e3f8fd
  2. #c6f1fb
  3. #a7eaf9
  4. #86e3f7
  5. #5cdbf5
  6. #00d3f2
  7. #00a5be
  8. #007a8c
  9. #00515e
  10. #002b33
  11. #000a0d

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. #00d3f2
  2. #0b2c30
  3. #508f9b
  4. #c6fbff
  5. #275e67

Recolor's generator, with cyan-400 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #0b2c30, #508f9b, #c6fbff, #275e67. Open it in Recolor.

Using cyan-400

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

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

Common questions

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

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

Is Tailwind cyan-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-400: oklch(78.9% 0.154 211.53); #00d3f2 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is darkturquoise (#00ced1), 0.047 away in OKLab.

Sources