RecolorOpen Recolor

A vivid medium red, white text passes AA

Tailwind red-600

Tailwind red-600 is oklch(57.7% 0.245 27.325) in Tailwind CSS 4.3.3, which is #e7000b as the nearest sRGB hex and rgb(231 0 11). White text on it reaches 4.77:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#e7000bred-600
From the theme file of Tailwind CSS 4.3.3 (--color-red-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(57.7% 0.245 27.325)
Hex#e7000b, the nearest color in sRGB
RGBrgb(231 0 11)
HSLhsl(357 100% 45%)
OKLCH of the hexoklch(58.3% 0.239 28.5)
CSS variablevar(--color-red-600)
Nearest CSS namecrimson #dc143c, 0.039 away in OKLab
White text4.77:1: AA passes, AAA fails, large text passes
Black text4.40:1: AA fails, AAA fails, large text passes

About red-600

Tailwind red-600 is a vivid medium red: OKLCH lightness 57.7%, chroma 0.245, hue 27.3 degrees. On Tailwind's red scale it sits between red-500 at 63.7% and red-700 at 50.5%.

HSL calls its lightness 45%, OKLCH 57.7%: 12 points between a formula and a measure of what the eye sees. Its value lies outside sRGB, the colors a hex code can name: #e7000b is what CSS Color 4's gamut mapping makes of it, chroma 0.239 instead of 0.245, moving 0.6 points of lightness and 1.2 degrees of hue. A wide-gamut screen shows the stronger original.

White text on red-600 reaches 4.77:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 4.40:1. It is the lightest red shade that carries white body text; red-500 falls short at 3.81:1.

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

Tints and shades

  1. #ffdfd9
  2. #ffbeb4
  3. #fe9d8f
  4. #f9796a
  5. #f15043
  6. #e7000b
  7. #b50006
  8. #860003
  9. #590001
  10. #300000
  11. #0c0000

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. #e7000b
  2. #141b15
  3. #e0b9b6
  4. #954136
  5. #d5f1d8

Recolor's generator, with red-600 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #141b15, #e0b9b6, #954136, #d5f1d8. Open it in Recolor.

Using red-600

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

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

Common questions

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

Yes. White text measures 4.77:1 on red-600, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind red-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-600: oklch(57.7% 0.245 27.325); #e7000b is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is crimson (#dc143c), 0.039 away in OKLab.

Sources