RecolorOpen Recolor

A pale cyan, black text passes AA

Tailwind cyan-100

Tailwind cyan-100 is oklch(95.6% 0.045 203.388) in Tailwind CSS 4.3.3, which is #cefafe in hex and rgb(206 250 254). Black text on it reaches 18.73:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#cefafecyan-100
From the theme file of Tailwind CSS 4.3.3 (--color-cyan-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(95.6% 0.045 203.388)
Hex#cefafe
RGBrgb(206 250 254)
HSLhsl(185 96% 90%)
CSS variablevar(--color-cyan-100)
Nearest CSS namelightcyan #e0ffff, 0.026 away in OKLab
White text1.12:1: AA fails, AAA fails, large text fails
Black text18.73:1: AA passes, AAA passes, large text passes

About cyan-100

Tailwind cyan-100 is a pale cyan: OKLCH lightness 95.6%, chroma 0.045, hue 203.4 degrees. On Tailwind's cyan scale it sits between cyan-50 at 98.4% and cyan-200 at 91.7%.

Here HSL's lightness, 90%, lands near OKLCH's 95.6%, which is not true of every color. Its value fits inside sRGB, so #cefafe is the same color, not an approximation.

Black text on cyan-100 measures 18.73:1, past the 7:1 of WCAG AAA, while white text manages only 1.12:1. On the cyan scale black text works down to cyan-600, which leaves cyan-100 5 shades of margin.

The closest CSS named color is lightcyan (#e0ffff), 0.026 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #f7feff
  2. #effdff
  3. #e7fdff
  4. #dffcfe
  5. #d7fbfe
  6. #cefafe
  7. #a1c4c7
  8. #779193
  9. #4e6163
  10. #2a3536
  11. #090e0f

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. #cefafe
  2. #c46f63
  3. #201d0e
  4. #8fb4ff
  5. #366667

Recolor's generator, with cyan-100 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #c46f63, #201d0e, #8fb4ff, #366667. Open it in Recolor.

Using cyan-100

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

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

Common questions

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

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

Is Tailwind cyan-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-cyan-100: oklch(95.6% 0.045 203.388); #cefafe is its conversion to sRGB.

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

No. The nearest CSS named color is lightcyan (#e0ffff), 0.026 away in OKLab.

Sources