RecolorOpen Recolor

A vivid light cyan, black text passes AA

Tailwind cyan-300

The hex code of Tailwind cyan-300 is #53eafd (rgb(83 234 253)), from its Tailwind CSS 4.3.3 value oklch(86.5% 0.127 207.078). Black text on it reaches 14.56:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#53eafdcyan-300
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(86.5% 0.127 207.078)
Hex#53eafd
RGBrgb(83 234 253)
HSLhsl(187 98% 66%)
CSS variablevar(--color-cyan-300)
Nearest CSS nameaqua #00ffff, 0.057 away in OKLab
White text1.44:1: AA fails, AAA fails, large text fails
Black text14.56:1: AA passes, AAA passes, large text passes

About cyan-300

Read as numbers, cyan-300 is lightness 86.5%, chroma 0.127 and hue 207.1 degrees; read by eye, it is a vivid light cyan. Its neighbors on the cyan scale are cyan-200, 5.2 points lighter, and cyan-400, 7.6 points darker.

Its HSL lightness, 66%, says little about how light cyan-300 looks; OKLCH, made to match the eye, measures 86.5%, 21 points away. No gamut mapping is needed here: oklch(86.5% 0.127 207.078) sits inside sRGB and #53eafd matches it.

Black on cyan-300 reads at 14.56:1, enough for AAA body text; white reaches 1.44:1 and should stay off it. On the cyan scale black text works down to cyan-600, which leaves cyan-300 3 shades of margin.

No CSS keyword matches it; aqua (#00ffff) is the nearest, 0.057 away in OKLab, a clear step off.

Tints and shades

  1. #e8fcff
  2. #d0f9ff
  3. #b7f6fe
  4. #9cf2fe
  5. #7ceefe
  6. #53eafd
  7. #3fb7c7
  8. #2c8793
  9. #1b5a62
  10. #0b3136
  11. #010c0e

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. #53eafd
  2. #624851
  3. #e7af86
  4. #1f1619
  5. #368d97

Around cyan-300 as swatch 1, Recolor's generator made a split-complementary palette, built on the two hues beside its opposite: #624851, #e7af86, #1f1619, #368d97, drawn from a seed fixed by its hex. Open it in Recolor.

Using cyan-300

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

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

Common questions

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

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

Is Tailwind cyan-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-300: oklch(86.5% 0.127 207.078); #53eafd is its conversion to sRGB.

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

No. The nearest CSS named color is aqua (#00ffff), 0.057 away in OKLab.

Sources