RecolorOpen Recolor

A vivid dark red, white text passes AA

Tailwind rose-800

Tailwind rose-800 is oklch(45.5% 0.188 13.697) in Tailwind CSS 4.3.3, which is #a50036 as the nearest sRGB hex and rgb(165 0 54). White text on it reaches 7.92:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#a50036rose-800
From the theme file of Tailwind CSS 4.3.3 (--color-rose-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(45.5% 0.188 13.697)
Hex#a50036, the nearest color in sRGB
RGBrgb(165 0 54)
HSLhsl(340 100% 32%)
OKLCH of the hexoklch(45.9% 0.184 14.6)
CSS variablevar(--color-rose-800)
Nearest CSS namebrown #a52a2a, 0.046 away in OKLab
White text7.92:1: AA passes, AAA passes, large text passes
Black text2.65:1: AA fails, AAA fails, large text fails

About rose-800

Tailwind rose-800 is a vivid dark red: OKLCH lightness 45.5%, chroma 0.188, hue 13.7 degrees. On Tailwind's rose scale it sits between rose-700 at 51.4% and rose-900 at 41.0%.

HSL calls its lightness 32%, OKLCH 45.5%: 13 points between a formula and a measure of what the eye sees. Its value lies outside sRGB, the colors a hex code can name: #a50036 is what CSS Color 4's gamut mapping makes of it, chroma 0.184 instead of 0.188, moving 0.4 points of lightness and 0.9 degrees of hue. A wide-gamut screen shows the stronger original.

White text on rose-800 measures 7.92:1, past the 7:1 of WCAG AAA, while black text manages only 2.65:1. White text passes on every rose shade from rose-600 down, so rose-800 is 2 shades past the line.

The closest CSS named color is brown (#a52a2a), 0.046 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #f5dadb
  2. #e9b4b8
  3. #db9095
  4. #cb6a74
  5. #b94255
  6. #a50036
  7. #810028
  8. #5e001b
  9. #3d000f
  10. #1f0005
  11. #060001

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. #a50036
  2. #ffdde0
  3. #5c87c5
  4. #2f1d1e
  5. #b4cda9

Recolor's generator, with rose-800 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #ffdde0, #5c87c5, #2f1d1e, #b4cda9. Open it in Recolor.

Using rose-800

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

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

Common questions

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

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

Is Tailwind rose-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-800: oklch(45.5% 0.188 13.697); #a50036 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is brown (#a52a2a), 0.046 away in OKLab.

Sources