RecolorOpen Recolor

A pale pink, black text passes AA

Tailwind pink-100

In Tailwind CSS 4.3.3, pink-100 is defined as oklch(94.8% 0.028 342.258); in hex that is #fce7f3, or rgb(252 231 243). Black text on it reaches 17.86:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fce7f3pink-100
From the theme file of Tailwind CSS 4.3.3 (--color-pink-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(94.8% 0.028 342.258)
Hex#fce7f3
RGBrgb(252 231 243)
HSLhsl(326 78% 95%)
CSS variablevar(--color-pink-100)
Nearest CSS namemistyrose #ffe4e1, 0.023 away in OKLab
White text1.18:1: AA fails, AAA fails, large text fails
Black text17.86:1: AA passes, AAA passes, large text passes

About pink-100

In OKLCH, pink-100 has a lightness of 94.8%, a chroma of 0.028 and a hue of 342.3 degrees, which makes it a pale pink. The step up to pink-50 is 2.3 points of lightness, and the step down to pink-200 4.9 points.

HSL and OKLCH agree on how light it is, 95% and 94.8%. The value lies inside sRGB, the gamut of a hex code, so pink-100 converts to #fce7f3 without losing chroma.

For text, pink-100 wants black: 17.86:1 clears even AAA's 7:1, and white at 1.18:1 fails AA. Black text passes on every pink shade from pink-50 to pink-600, 5 shades darker than pink-100.

Among the CSS keywords, mistyrose (#ffe4e1) comes closest at 0.023 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #fffbfd
  2. #fef7fb
  3. #fef3f9
  4. #fdeff7
  5. #fdebf5
  6. #fce7f3
  7. #c6b5bf
  8. #92868d
  9. #62595e
  10. #353033
  11. #0e0c0d

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. #fce7f3
  2. #2c5c00
  3. #7bdd94
  4. #002414
  5. #4e938b

Locked as the first of five swatches, pink-100 gets #2c5c00, #7bdd94, #002414, #4e938b from Recolor's generator, an analogous palette, hues next to each other on the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using pink-100

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

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

Common questions

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

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

Is Tailwind pink-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-pink-100: oklch(94.8% 0.028 342.258); #fce7f3 is its conversion to sRGB.

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

No. The nearest CSS named color is mistyrose (#ffe4e1), 0.023 away in OKLab.

Sources