RecolorOpen Recolor

A pinkish white, black text passes AA

Tailwind pink-50

Tailwind pink-50 is oklch(97.1% 0.014 343.198) in Tailwind CSS 4.3.3, which is #fdf2f8 in hex and rgb(253 242 248). Black text on it reaches 19.23:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#fdf2f8pink-50
From the theme file of Tailwind CSS 4.3.3 (--color-pink-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(97.1% 0.014 343.198)
Hex#fdf2f8
RGBrgb(253 242 248)
HSLhsl(327 73% 97%)
CSS variablevar(--color-pink-50)
Nearest CSS namelavenderblush #fff0f5, 0.006 away in OKLab
White text1.09:1: AA fails, AAA fails, large text fails
Black text19.23:1: AA passes, AAA passes, large text passes

About pink-50

Tailwind pink-50 is a pinkish white: OKLCH lightness 97.1%, chroma 0.014, hue 343.2 degrees. As the first of the eleven pink shades it sits closest to white, 2.9 points below it and 2.3 points above pink-100.

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

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

The CSS keyword lavenderblush (#fff0f5) is almost the same color: 0.006 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffdfd
  2. #fffbfc
  3. #fff8fa
  4. #fff6f8
  5. #fff4f7
  6. #fdf2f8
  7. #c8bec0
  8. #948c8e
  9. #635e5f
  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. #fdf2f8
  2. #794890
  3. #f4b869
  4. #082120
  5. #9d5cbd

Recolor's generator, with pink-50 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #794890, #f4b869, #082120, #9d5cbd. Open it in Recolor.

Using pink-50

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

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

Common questions

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

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

Is Tailwind pink-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-50: oklch(97.1% 0.014 343.198); #fdf2f8 is its conversion to sRGB.

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

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

Sources