RecolorOpen Recolor

A cool white, black text passes AA

Tailwind cyan-50

The hex code of Tailwind cyan-50 is #ecfeff (rgb(236 254 255)), from its Tailwind CSS 4.3.3 value oklch(98.4% 0.019 200.873). Black text on it reaches 20.19:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ecfeffcyan-50
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(98.4% 0.019 200.873)
Hex#ecfeff
RGBrgb(236 254 255)
HSLhsl(183 100% 96%)
CSS variablevar(--color-cyan-50)
Nearest CSS nameazure #f0ffff, 0.006 away in OKLab
White text1.04:1: AA fails, AAA fails, large text fails
Black text20.19:1: AA passes, AAA passes, large text passes

About cyan-50

Read as numbers, cyan-50 is lightness 98.4%, chroma 0.019 and hue 200.9 degrees; read by eye, it is a cool white. It opens the cyan scale as its lightest shade, 2.8 points of lightness above cyan-100.

HSL and OKLCH agree on how light it is, 96% and 98.4%. No gamut mapping is needed here: oklch(98.4% 0.019 200.873) sits inside sRGB and #ecfeff matches it.

Black on cyan-50 reads at 20.19:1, enough for AAA body text; white reaches 1.04:1 and should stay off it. Black text passes on every cyan shade from cyan-50 to cyan-600, 6 shades darker than cyan-50.

Its nearest CSS named color, azure (#f0ffff), is 0.006 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffdfe
  2. #fffcfd
  3. #fffafc
  4. #fff8fb
  5. #ecfeff
  6. #cdc0c4
  7. #988e91
  8. #665f61
  9. #383435
  10. #0f0e0e

From light to dark: 4 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. #ecfeff
  2. #6d5c47
  3. #d1c5aa
  4. #2e2c08
  5. #779e45

Around cyan-50 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #6d5c47, #d1c5aa, #2e2c08, #779e45, drawn from a seed fixed by its hex. Open it in Recolor.

Using cyan-50

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

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

Common questions

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

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

Is Tailwind cyan-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-50: oklch(98.4% 0.019 200.873); #ecfeff is its conversion to sRGB.

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

Yes, nearly: azure (#f0ffff) is 0.006 away in OKLab, too close to tell apart by eye.

Sources