RecolorOpen Recolor

A bluish white, black text passes AA

Tailwind blue-50

In Tailwind CSS 4.3.3, blue-50 is defined as oklch(97% 0.014 254.604); in hex that is #eff6ff, or rgb(239 246 255). Black text on it reaches 19.30:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#eff6ffblue-50
From the theme file of Tailwind CSS 4.3.3 (--color-blue-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97% 0.014 254.604)
Hex#eff6ff
RGBrgb(239 246 255)
HSLhsl(214 100% 97%)
CSS variablevar(--color-blue-50)
Nearest CSS namealiceblue #f0f8ff, 0.005 away in OKLab
White text1.09:1: AA fails, AAA fails, large text fails
Black text19.30:1: AA passes, AAA passes, large text passes

About blue-50

In OKLCH, blue-50 has a lightness of 97.0%, a chroma of 0.014 and a hue of 254.6 degrees, which makes it a bluish white. It opens the blue scale as its lightest shade, 3.8 points of lightness above blue-100.

HSL and OKLCH agree on how light it is, 97% and 97.0%. The value lies inside sRGB, the gamut of a hex code, so blue-50 converts to #eff6ff without losing chroma.

For text, blue-50 wants black: 19.30:1 clears even AAA's 7:1, and white at 1.09:1 fails AA. Black text passes on every blue shade from blue-50 to blue-500, 5 shades darker than blue-50.

Its nearest CSS named color, aliceblue (#f0f8ff), is 0.005 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffdfd
  2. #fffbfc
  3. #fff8fa
  4. #fef6f8
  5. #fef4f6
  6. #eff6ff
  7. #c7bdc0
  8. #948c8e
  9. #635d5f
  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. #eff6ff
  2. #2a4f83
  3. #e7aa8c
  4. #1e1613
  5. #4d81c3

Locked as the first of five swatches, blue-50 gets #2a4f83, #e7aa8c, #1e1613, #4d81c3 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using blue-50

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

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

Common questions

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

No. White text measures 1.09:1 on blue-50, under AA's 4.5:1; black text measures 19.30:1 and passes. The lightest blue shade for white text is blue-600.

Is Tailwind blue-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-blue-50: oklch(97% 0.014 254.604); #eff6ff is its conversion to sRGB.

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

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

Sources