RecolorOpen Recolor

A pale pink, black text passes AA

Tailwind red-100

In Tailwind CSS 4.3.3, red-100 is defined as oklch(93.6% 0.032 17.717); in hex that is #ffe2e2, or rgb(255 226 226). Black text on it reaches 17.23:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#ffe2e2red-100
From the theme file of Tailwind CSS 4.3.3 (--color-red-100), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(93.6% 0.032 17.717)
Hex#ffe2e2
RGBrgb(255 226 226)
HSLhsl(0 100% 94%)
CSS variablevar(--color-red-100)
Nearest CSS namemistyrose #ffe4e1, 0.006 away in OKLab
White text1.22:1: AA fails, AAA fails, large text fails
Black text17.23:1: AA passes, AAA passes, large text passes

About red-100

In OKLCH, red-100 has a lightness of 93.6%, a chroma of 0.032 and a hue of 17.7 degrees, which makes it a pale pink. The step up to red-50 is 3.5 points of lightness, and the step down to red-200 5.1 points.

Here HSL's lightness, 94%, lands near OKLCH's 93.6%, which is not true of every color. The value lies inside sRGB, the gamut of a hex code, so red-100 converts to #ffe2e2 without losing chroma.

For text, red-100 wants black: 17.23:1 clears even AAA's 7:1, and white at 1.22:1 fails AA. On the red scale black text works down to red-500, which leaves red-100 4 shades of margin.

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

Tints and shades

  1. #fffafa
  2. #fff5f5
  3. #fff0f0
  4. #ffecec
  5. #ffe7e7
  6. #ffe2e2
  7. #c8b1b1
  8. #948383
  9. #635757
  10. #362f2f
  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. #ffe2e2
  2. #525907
  3. #ecafc5
  4. #37252b
  5. #3483b1

Locked as the first of five swatches, red-100 gets #525907, #ecafc5, #37252b, #3483b1 from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using red-100

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

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

Common questions

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

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

Is Tailwind red-100 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-100: oklch(93.6% 0.032 17.717); #ffe2e2 is its conversion to sRGB.

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

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

Sources