RecolorOpen Recolor

A vivid medium red, black text passes AA

Tailwind red-500

The hex code of Tailwind red-500 is #fb2c36 (rgb(251 44 54)), from its Tailwind CSS 4.3.3 value oklch(63.7% 0.237 25.331). Black text on it reaches 5.52:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#fb2c36red-500
From the theme file of Tailwind CSS 4.3.3 (--color-red-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(63.7% 0.237 25.331)
Hex#fb2c36
RGBrgb(251 44 54)
HSLhsl(357 96% 58%)
CSS variablevar(--color-red-500)
Nearest CSS namered #ff0000, 0.028 away in OKLab
White text3.81:1: AA fails, AAA fails, large text passes
Black text5.52:1: AA passes, AAA fails, large text passes

About red-500

Read as numbers, red-500 is lightness 63.7%, chroma 0.237 and hue 25.3 degrees; read by eye, it is a vivid medium red. Its neighbors on the red scale are red-400, 6.7 points lighter, and red-600, 6.0 points darker.

Here HSL's lightness, 58%, lands near OKLCH's 63.7%, which is not true of every color. No gamut mapping is needed here: oklch(63.7% 0.237 25.331) sits inside sRGB and #fb2c36 matches it.

Black is the ink for red-500: 5.52:1 passes AA for body text, where white stops at 3.81:1. Black text holds AA down to here on the red scale; at red-600 it falls to 4.40:1.

Of the named colors, red (#ff0000) is the nearest, 0.028 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #ffe2de
  2. #ffc4bd
  3. #ffa59c
  4. #ff847c
  5. #ff605a
  6. #fb2c36
  7. #c52028
  8. #92151b
  9. #610a0f
  10. #350305
  11. #0e0001

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. #fb2c36
  2. #ffe1e6
  3. #3a1a16
  4. #fca280
  5. #64422d

Around red-500 as swatch 1, Recolor's generator made an analogous palette, hues next to each other on the wheel: #ffe1e6, #3a1a16, #fca280, #64422d, drawn from a seed fixed by its hex. Open it in Recolor.

Using red-500

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

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

Common questions

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

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

Is Tailwind red-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-500: oklch(63.7% 0.237 25.331); #fb2c36 is its conversion to sRGB.

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

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

Sources