RecolorOpen Recolor

A vivid dark pink, white text passes AA

Tailwind rose-900

In Tailwind CSS 4.3.3, rose-900 is defined as oklch(41% 0.159 10.272); in hex that is #8b0836, or rgb(139 8 54). White text on it reaches 9.61:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#8b0836rose-900
From the theme file of Tailwind CSS 4.3.3 (--color-rose-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(41% 0.159 10.272)
Hex#8b0836
RGBrgb(139 8 54)
HSLhsl(339 89% 29%)
CSS variablevar(--color-rose-900)
Nearest CSS namedarkred #8b0000, 0.055 away in OKLab
White text9.61:1: AA passes, AAA passes, large text passes
Black text2.19:1: AA fails, AAA fails, large text fails

About rose-900

In OKLCH, rose-900 has a lightness of 41.0%, a chroma of 0.159 and a hue of 10.3 degrees, which makes it a vivid dark pink. The step up to rose-800 is 4.5 points of lightness, and the step down to rose-950 13.9 points.

Its lightness is 29% in HSL and 41.0% in OKLCH, 12 points apart; only the second tracks how light it looks. The value lies inside sRGB, the gamut of a hex code, so rose-900 converts to #8b0836 without losing chroma.

For text, rose-900 wants white: 9.61:1 clears even AAA's 7:1, and black at 2.19:1 fails AA. On the rose scale white text works from rose-600 to rose-950; rose-900 has 3 shades of margin.

No CSS keyword matches it; darkred (#8b0000) is the nearest, 0.055 away in OKLab, a clear step off.

Tints and shades

  1. #f0d8da
  2. #dfb1b7
  3. #cc8c94
  4. #b86673
  5. #a23f54
  6. #8b0836
  7. #6c0528
  8. #4e021b
  9. #32010f
  10. #190005
  11. #040001

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. #8b0836
  2. #cfa6b8
  3. #25171a
  4. #d0716a
  5. #ffd8b7

Locked as the first of five swatches, rose-900 gets #cfa6b8, #25171a, #d0716a, #ffd8b7 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 rose-900

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

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

Common questions

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

Yes. White text measures 9.61:1 on rose-900, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind rose-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-900: oklch(41% 0.159 10.272); #8b0836 is its conversion to sRGB.

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

No. The nearest CSS named color is darkred (#8b0000), 0.055 away in OKLab.

Sources