RecolorOpen Recolor

A vivid light pink, black text passes AA

Tailwind red-200

The hex code of Tailwind red-200 is #ffc9c9 (rgb(255 201 201)), from its Tailwind CSS 4.3.3 value oklch(88.5% 0.062 18.334). Black text on it reaches 14.45:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ffc9c9red-200
From the theme file of Tailwind CSS 4.3.3 (--color-red-200), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(88.5% 0.062 18.334)
Hex#ffc9c9, the nearest color in sRGB
RGBrgb(255 201 201)
HSLhsl(0 100% 89%)
OKLCH of the hexoklch(88.3% 0.062 18.4)
CSS variablevar(--color-red-200)
Nearest CSS namepink #ffc0cb, 0.024 away in OKLab
White text1.45:1: AA fails, AAA fails, large text fails
Black text14.45:1: AA passes, AAA passes, large text passes

About red-200

Read as numbers, red-200 is lightness 88.5%, chroma 0.062 and hue 18.3 degrees; read by eye, it is a vivid light pink. Its neighbors on the red scale are red-100, 5.1 points lighter, and red-300, 7.7 points darker.

HSL and OKLCH agree on how light it is, 89% and 88.5%. A hex code cannot hold red-200 exactly: the value is outside sRGB, and #ffc9c9 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.000, 0.2 points of lightness and 0.1 degrees of hue away from the value.

Black on red-200 reads at 14.45:1, enough for AAA body text; white reaches 1.45:1 and should stay off it. Black text passes on every red shade from red-50 to red-500, 3 shades darker than red-200.

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

Tints and shades

  1. #fff6f6
  2. #ffeded
  3. #ffe4e4
  4. #ffdbdb
  5. #ffd2d2
  6. #ffc9c9
  7. #c89d9d
  8. #947474
  9. #634c4c
  10. #362828
  11. #0f0909

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. #ffc9c9
  2. #2b5744
  3. #96d1dd
  4. #2d2736
  5. #b66b55

Around red-200 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #2b5744, #96d1dd, #2d2736, #b66b55, drawn from a seed fixed by its hex. Open it in Recolor.

Using red-200

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

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

Common questions

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

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

Is Tailwind red-200 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-200: oklch(88.5% 0.062 18.334); #ffc9c9 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources