RecolorOpen Recolor

A pinkish white, black text passes AA

Tailwind red-50

Tailwind red-50 is oklch(97.1% 0.013 17.38) in Tailwind CSS 4.3.3, which is #fef2f2 in hex and rgb(254 242 242). Black text on it reaches 19.20:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#fef2f2red-50
From the theme file of Tailwind CSS 4.3.3 (--color-red-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97.1% 0.013 17.38)
Hex#fef2f2
RGBrgb(254 242 242)
HSLhsl(0 86% 97%)
CSS variablevar(--color-red-50)
Nearest CSS namelavenderblush #fff0f5, 0.008 away in OKLab
White text1.09:1: AA fails, AAA fails, large text fails
Black text19.20:1: AA passes, AAA passes, large text passes

About red-50

Tailwind red-50 is a pinkish white: OKLCH lightness 97.1%, chroma 0.013, hue 17.4 degrees. It opens the red scale as its lightest shade, 3.5 points of lightness above red-100.

HSL and OKLCH agree on how light it is, 97% and 97.1%. Its value fits inside sRGB, so #fef2f2 is the same color, not an approximation.

Black text on red-50 measures 19.20:1, past the 7:1 of WCAG AAA, while white text manages only 1.09:1. Black text passes on every red shade from red-50 to red-500, 5 shades darker than red-50.

Its nearest CSS named color, lavenderblush (#fff0f5), is 0.008 away in OKLab, too close to tell apart by eye.

Tints and shades

  1. #fffdfd
  2. #fefbfc
  3. #fef8fa
  4. #fef6f8
  5. #fef4f6
  6. #fef2f2
  7. #c7bec0
  8. #938c8e
  9. #625e5f
  10. #363334
  11. #0e0d0e

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. #fef2f2
  2. #be66bd
  3. #002a33
  4. #ceb643
  5. #834352

Recolor's generator, with red-50 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #be66bd, #002a33, #ceb643, #834352. Open it in Recolor.

Using red-50

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

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

Common questions

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

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

Is Tailwind red-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-50: oklch(97.1% 0.013 17.38); #fef2f2 is its conversion to sRGB.

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

Yes, nearly: lavenderblush (#fff0f5) is 0.008 away in OKLab, too close to tell apart by eye.

Sources