RecolorOpen Recolor

A pinkish white, black text passes AA

Tailwind rose-50

In Tailwind CSS 4.3.3, rose-50 is defined as oklch(96.9% 0.015 12.422); in hex that is #fff1f2, or rgb(255 241 242). Black text on it reaches 19.12:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fff1f2rose-50
From the theme file of Tailwind CSS 4.3.3 (--color-rose-50), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(96.9% 0.015 12.422)
Hex#fff1f2
RGBrgb(255 241 242)
HSLhsl(356 100% 97%)
CSS variablevar(--color-rose-50)
Nearest CSS namelavenderblush #fff0f5, 0.005 away in OKLab
White text1.10:1: AA fails, AAA fails, large text fails
Black text19.12:1: AA passes, AAA passes, large text passes

About rose-50

In OKLCH, rose-50 has a lightness of 96.9%, a chroma of 0.015 and a hue of 12.4 degrees, which makes it a pinkish white. It opens the rose scale as its lightest shade, 2.8 points of lightness above rose-100.

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

For text, rose-50 wants black: 19.12:1 clears even AAA's 7:1, and white at 1.10:1 fails AA. Black text passes on every rose shade from rose-50 to rose-600, 6 shades darker than rose-50.

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

Tints and shades

  1. #fffdfd
  2. #fffafb
  3. #fff8fa
  4. #fff6f8
  5. #fff3f6
  6. #fff1f2
  7. #c8bdc0
  8. #948c8e
  9. #635d5f
  10. #363333
  11. #0f0d0d

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. #fff1f2
  2. #a18f2e
  3. #261e2a
  4. #98d6ca
  5. #7c4446

Locked as the first of five swatches, rose-50 gets #a18f2e, #261e2a, #98d6ca, #7c4446 from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using rose-50

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

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

Common questions

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

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

Is Tailwind rose-50 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-50: oklch(96.9% 0.015 12.422); #fff1f2 is its conversion to sRGB.

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

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

Sources