RecolorOpen Recolor

A vivid light pink, black text passes AA

Tailwind rose-300

In Tailwind CSS 4.3.3, rose-300 is defined as oklch(81% 0.117 11.638); as the nearest sRGB hex that is #ffa1ad, or rgb(255 161 173). Black text on it reaches 10.95:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#ffa1adrose-300
From the theme file of Tailwind CSS 4.3.3 (--color-rose-300), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(81% 0.117 11.638)
Hex#ffa1ad, the nearest color in sRGB
RGBrgb(255 161 173)
HSLhsl(352 100% 82%)
OKLCH of the hexoklch(80.6% 0.112 11.6)
CSS variablevar(--color-rose-300)
Nearest CSS namelightpink #ffb6c1, 0.049 away in OKLab
White text1.92:1: AA fails, AAA fails, large text fails
Black text10.95:1: AA passes, AAA passes, large text passes

About rose-300

In OKLCH, rose-300 has a lightness of 81.0%, a chroma of 0.117 and a hue of 11.6 degrees, which makes it a vivid light pink. The step up to rose-200 is 8.2 points of lightness, and the step down to rose-400 9.8 points.

Here HSL's lightness, 82%, lands near OKLCH's 81.0%, which is not true of every color. Rose-300 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #ffa1ad, gives up 0.005 of chroma and moves 0.4 points of lightness and 0.0 degrees of hue; a Display P3 screen shows the full value.

For text, rose-300 wants black: 10.95:1 clears even AAA's 7:1, and white at 1.92:1 fails AA. On the rose scale black text works down to rose-600, which leaves rose-300 3 shades of margin.

Among the CSS keywords, lightpink (#ffb6c1) comes closest at 0.049 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #fff0f1
  2. #ffe0e3
  3. #ffd1d5
  4. #ffc1c8
  5. #ffb1ba
  6. #ffa1ad
  7. #c87d87
  8. #945b63
  9. #633c41
  10. #361e21
  11. #0f0506

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. #ffa1ad
  2. #231919
  3. #75a051
  4. #e2f3ff
  5. #88414b

Locked as the first of five swatches, rose-300 gets #231919, #75a051, #e2f3ff, #88414b 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 rose-300

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

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

Common questions

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

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

Is Tailwind rose-300 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-300: oklch(81% 0.117 11.638); #ffa1ad is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is lightpink (#ffb6c1), 0.049 away in OKLab.

Sources