RecolorOpen Recolor

A vivid light pink, black text passes AA

Tailwind rose-200

Tailwind rose-200 is oklch(89.2% 0.058 10.001) in Tailwind CSS 4.3.3, which is #ffccd3 as the nearest sRGB hex and rgb(255 204 211). Black text on it reaches 14.83:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ffccd3rose-200
From the theme file of Tailwind CSS 4.3.3 (--color-rose-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(89.2% 0.058 10.001)
Hex#ffccd3, the nearest color in sRGB
RGBrgb(255 204 211)
HSLhsl(352 100% 90%)
OKLCH of the hexoklch(89.2% 0.058 9.1)
CSS variablevar(--color-rose-200)
Nearest CSS namepink #ffc0cb, 0.028 away in OKLab
White text1.42:1: AA fails, AAA fails, large text fails
Black text14.83:1: AA passes, AAA passes, large text passes

About rose-200

Tailwind rose-200 is a vivid light pink: OKLCH lightness 89.2%, chroma 0.058, hue 10.0 degrees. On Tailwind's rose scale it sits between rose-100 at 94.1% and rose-300 at 81.0%.

HSL and OKLCH agree on how light it is, 90% and 89.2%. Its value lies outside sRGB, the colors a hex code can name: #ffccd3 is what CSS Color 4's gamut mapping makes of it, chroma 0.058 instead of 0.058, moving 0.0 points of lightness and 0.9 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on rose-200 measures 14.83:1, past the 7:1 of WCAG AAA, while white text manages only 1.42:1. Black text passes on every rose shade from rose-50 to rose-600, 4 shades darker than rose-200.

The closest CSS named color is pink (#ffc0cb), 0.028 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #fff7f8
  2. #ffeef0
  3. #ffe6e9
  4. #ffdde2
  5. #ffd5da
  6. #ffccd3
  7. #c8a0a5
  8. #94757a
  9. #634e51
  10. #36292b
  11. #0f090a

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. #ffccd3
  2. #ba5e72
  3. #271416
  4. #accecb
  5. #0e5f5d

Recolor's generator, with rose-200 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #ba5e72, #271416, #accecb, #0e5f5d. Open it in Recolor.

Using rose-200

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

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

Common questions

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

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

Is Tailwind rose-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-200: oklch(89.2% 0.058 10.001); #ffccd3 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is pink (#ffc0cb), 0.028 away in OKLab.

Sources