RecolorOpen Recolor

A bluish white, black text passes AA

Tailwind sky-50

Tailwind sky-50 is oklch(97.7% 0.013 236.62) in Tailwind CSS 4.3.3, which is #f0f9ff as the nearest sRGB hex and rgb(240 249 255). Black text on it reaches 19.70:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#f0f9ffsky-50
From the theme file of Tailwind CSS 4.3.3 (--color-sky-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97.7% 0.013 236.62)
Hex#f0f9ff, the nearest color in sRGB
RGBrgb(240 249 255)
HSLhsl(204 100% 97%)
OKLCH of the hexoklch(97.7% 0.012 236.6)
CSS variablevar(--color-sky-50)
Nearest CSS namealiceblue #f0f8ff, 0.003 away in OKLab
White text1.07:1: AA fails, AAA fails, large text fails
Black text19.70:1: AA passes, AAA passes, large text passes

About sky-50

Tailwind sky-50 is a bluish white: OKLCH lightness 97.7%, chroma 0.013, hue 236.6 degrees. As the first of the eleven sky shades it sits closest to white, 2.3 points below it and 2.6 points above sky-100.

Here HSL's lightness, 97%, lands near OKLCH's 97.7%, which is not true of every color. Its value lies outside sRGB, the colors a hex code can name: #f0f9ff is what CSS Color 4's gamut mapping makes of it, chroma 0.012 instead of 0.013, moving 0.0 points of lightness and 0.0 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on sky-50 measures 19.70:1, past the 7:1 of WCAG AAA, while white text manages only 1.07:1. On the sky scale black text works down to sky-600, which leaves sky-50 6 shades of margin.

The CSS keyword aliceblue (#f0f8ff) is almost the same color: 0.003 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffdfe
  2. #fffbfc
  3. #fffafb
  4. #fff8fa
  5. #fff6f8
  6. #f0f9ff
  7. #c8c0c2
  8. #948e8f
  9. #635f60
  10. #363334
  11. #0f0d0e

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. #f0f9ff
  2. #1f99d4
  3. #251507
  4. #89cbff
  5. #7b4319

Recolor's generator, with sky-50 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #1f99d4, #251507, #89cbff, #7b4319. Open it in Recolor.

Using sky-50

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

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

Common questions

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

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

Is Tailwind sky-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-sky-50: oklch(97.7% 0.013 236.62); #f0f9ff is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: aliceblue (#f0f8ff) is 0.003 away in OKLab, too close to tell apart by eye.

Sources