RecolorOpen Recolor

A pale blue, black text passes AA

Tailwind sky-200

The hex code of Tailwind sky-200 is #b8e6fe (rgb(184 230 254)), from its Tailwind CSS 4.3.3 value oklch(90.1% 0.058 230.902). Black text on it reaches 15.79:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#b8e6fesky-200
From the theme file of Tailwind CSS 4.3.3 (--color-sky-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(90.1% 0.058 230.902)
Hex#b8e6fe
RGBrgb(184 230 254)
HSLhsl(201 97% 86%)
CSS variablevar(--color-sky-200)
Nearest CSS namepowderblue #b0e0e6, 0.035 away in OKLab
White text1.33:1: AA fails, AAA fails, large text fails
Black text15.79:1: AA passes, AAA passes, large text passes

About sky-200

Read as numbers, sky-200 is lightness 90.1%, chroma 0.058 and hue 230.9 degrees; read by eye, it is a pale blue. Its neighbors on the sky scale are sky-100, 5.0 points lighter, and sky-300, 7.3 points darker.

Here HSL's lightness, 86%, lands near OKLCH's 90.1%, which is not true of every color. No gamut mapping is needed here: oklch(90.1% 0.058 230.902) sits inside sRGB and #b8e6fe matches it.

Black on sky-200 reads at 15.79:1, enough for AAA body text; white reaches 1.33:1 and should stay off it. On the sky scale black text works down to sky-600, which leaves sky-200 4 shades of margin.

Of the named colors, powderblue (#b0e0e6) is the nearest, 0.035 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #f3fbff
  2. #e8f7ff
  3. #dcf3ff
  4. #d0eeff
  5. #c4eafe
  6. #b8e6fe
  7. #90b4c7
  8. #698593
  9. #455963
  10. #243036
  11. #070c0f

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. #b8e6fe
  2. #006386
  3. #f6b0d0
  4. #1f220d
  5. #d75f92

Around sky-200 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #006386, #f6b0d0, #1f220d, #d75f92, drawn from a seed fixed by its hex. Open it in Recolor.

Using sky-200

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

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

Common questions

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

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

Is Tailwind sky-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-200: oklch(90.1% 0.058 230.902); #b8e6fe is its conversion to sRGB.

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

No. The nearest CSS named color is powderblue (#b0e0e6), 0.035 away in OKLab.

Sources