RecolorOpen Recolor

A pale pink, black text passes AA

Tailwind rose-100

The hex code of Tailwind rose-100 is #ffe4e6 (rgb(255 228 230)), from its Tailwind CSS 4.3.3 value oklch(94.1% 0.03 12.58). Black text on it reaches 17.49:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ffe4e6rose-100
From the theme file of Tailwind CSS 4.3.3 (--color-rose-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(94.1% 0.03 12.58)
Hex#ffe4e6, the nearest color in sRGB
RGBrgb(255 228 230)
HSLhsl(356 100% 95%)
OKLCH of the hexoklch(94.1% 0.030 12.6)
CSS variablevar(--color-rose-100)
Nearest CSS namemistyrose #ffe4e1, 0.007 away in OKLab
White text1.20:1: AA fails, AAA fails, large text fails
Black text17.49:1: AA passes, AAA passes, large text passes

About rose-100

Read as numbers, rose-100 is lightness 94.1%, chroma 0.030 and hue 12.6 degrees; read by eye, it is a pale pink. Its neighbors on the rose scale are rose-50, 2.8 points lighter, and rose-200, 4.9 points darker.

Here HSL's lightness, 95%, lands near OKLCH's 94.1%, which is not true of every color. A hex code cannot hold rose-100 exactly: the value is outside sRGB, and #ffe4e6 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.000, 0.0 points of lightness and 0.0 degrees of hue away from the value.

Black on rose-100 reads at 17.49:1, enough for AAA body text; white reaches 1.20:1 and should stay off it. On the rose scale black text works down to rose-600, which leaves rose-100 5 shades of margin.

The CSS keyword mistyrose (#ffe4e1) is almost the same color: 0.007 apart in OKLab, under the step most people notice.

Tints and shades

  1. #fffafb
  2. #fff6f7
  3. #fff1f2
  4. #ffedee
  5. #ffe8ea
  6. #ffe4e6
  7. #c8b3b4
  8. #948485
  9. #635859
  10. #362f30
  11. #0f0c0c

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. #ffe4e6
  2. #009bae
  3. #092125
  4. #9cbcca
  5. #354f69

Around rose-100 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #009bae, #092125, #9cbcca, #354f69, drawn from a seed fixed by its hex. Open it in Recolor.

Using rose-100

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

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

Common questions

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

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

Is Tailwind rose-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-100: oklch(94.1% 0.03 12.58); #ffe4e6 is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: mistyrose (#ffe4e1) is 0.007 away in OKLab, too close to tell apart by eye.

Sources