RecolorOpen Recolor

A vivid light pink, black text passes AA

Tailwind pink-200

The hex code of Tailwind pink-200 is #fccee8 (rgb(252 206 232)), from its Tailwind CSS 4.3.3 value oklch(89.9% 0.061 343.231). Black text on it reaches 15.13:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#fccee8pink-200
From the theme file of Tailwind CSS 4.3.3 (--color-pink-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(89.9% 0.061 343.231)
Hex#fccee8
RGBrgb(252 206 232)
HSLhsl(326 88% 90%)
CSS variablevar(--color-pink-200)
Nearest CSS namepink #ffc0cb, 0.043 away in OKLab
White text1.39:1: AA fails, AAA fails, large text fails
Black text15.13:1: AA passes, AAA passes, large text passes

About pink-200

Read as numbers, pink-200 is lightness 89.9%, chroma 0.061 and hue 343.2 degrees; read by eye, it is a vivid light pink. Its neighbors on the pink scale are pink-100, 4.9 points lighter, and pink-300, 7.6 points darker.

Here HSL's lightness, 90%, lands near OKLCH's 89.9%, which is not true of every color. No gamut mapping is needed here: oklch(89.9% 0.061 343.231) sits inside sRGB and #fccee8 matches it.

Black on pink-200 reads at 15.13:1, enough for AAA body text; white reaches 1.39:1 and should stay off it. On the pink scale black text works down to pink-600, which leaves pink-200 4 shades of margin.

Of the named colors, pink (#ffc0cb) is the nearest, 0.043 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fff7fb
  2. #ffeff7
  3. #fee7f4
  4. #fedef0
  5. #fdd6ec
  6. #fccee8
  7. #c6a1b6
  8. #927786
  9. #624e59
  10. #352a30
  11. #0e090c

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. #fccee8
  2. #8e8f5f
  3. #2b1a23
  4. #cbbc5a
  5. #862d68

Around pink-200 as swatch 1, Recolor's generator made a triadic palette, three hues a third of the wheel apart: #8e8f5f, #2b1a23, #cbbc5a, #862d68, drawn from a seed fixed by its hex. Open it in Recolor.

Using pink-200

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

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

Common questions

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

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

Is Tailwind pink-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-200: oklch(89.9% 0.061 343.231); #fccee8 is its conversion to sRGB.

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

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

Sources