RecolorOpen Recolor

A vivid medium red, black text passes AA

Tailwind rose-500

Tailwind rose-500 is oklch(64.5% 0.246 16.439) in Tailwind CSS 4.3.3, which is #ff2056 as the nearest sRGB hex and rgb(255 32 86). Black text on it reaches 5.59:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ff2056rose-500
From the theme file of Tailwind CSS 4.3.3 (--color-rose-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(64.5% 0.246 16.439)
Hex#ff2056, the nearest color in sRGB
RGBrgb(255 32 86)
HSLhsl(345 100% 56%)
OKLCH of the hexoklch(64.3% 0.245 16.5)
CSS variablevar(--color-rose-500)
Nearest CSS namered #ff0000, 0.059 away in OKLab
White text3.75:1: AA fails, AAA fails, large text passes
Black text5.59:1: AA passes, AAA fails, large text passes

About rose-500

Tailwind rose-500 is a vivid medium red: OKLCH lightness 64.5%, chroma 0.246, hue 16.4 degrees. On Tailwind's rose scale it sits between rose-400 at 71.2% and rose-600 at 58.6%.

Its lightness is 56% in HSL and 64.5% in OKLCH, 8 points apart; only the second tracks how light it looks. Its value lies outside sRGB, the colors a hex code can name: #ff2056 is what CSS Color 4's gamut mapping makes of it, chroma 0.245 instead of 0.246, moving 0.2 points of lightness and 0.1 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on rose-500 reaches 5.59:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 3.75:1. On the rose scale black text works down to rose-600, which leaves rose-500 1 shade of margin.

No CSS keyword matches it; red (#ff0000) is the nearest, 0.059 away in OKLab, a clear step off.

Tints and shades

  1. #ffe1e2
  2. #ffc3c5
  3. #ffa3a9
  4. #ff828d
  5. #ff5b71
  6. #ff2056
  7. #c81742
  8. #940e2e
  9. #63061c
  10. #36020b
  11. #0f0001

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. #ff2056
  2. #f9d9e5
  3. #301f21
  4. #f6ac94
  5. #794a26

Recolor's generator, with rose-500 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #f9d9e5, #301f21, #f6ac94, #794a26. Open it in Recolor.

Using rose-500

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

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

Common questions

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

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

Is Tailwind rose-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-rose-500: oklch(64.5% 0.246 16.439); #ff2056 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is red (#ff0000), 0.059 away in OKLab.

Sources