RecolorOpen Recolor

A vivid medium red, black text passes AA

Tailwind red-400

In Tailwind CSS 4.3.3, red-400 is defined as oklch(70.4% 0.191 22.216); as the nearest sRGB hex that is #ff6467, or rgb(255 100 103). Black text on it reaches 7.27:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#ff6467red-400
From the theme file of Tailwind CSS 4.3.3 (--color-red-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.4% 0.191 22.216)
Hex#ff6467, the nearest color in sRGB
RGBrgb(255 100 103)
HSLhsl(359 100% 70%)
OKLCH of the hexoklch(70.2% 0.189 22.2)
CSS variablevar(--color-red-400)
Nearest CSS nametomato #ff6347, 0.035 away in OKLab
White text2.89:1: AA fails, AAA fails, large text fails
Black text7.27:1: AA passes, AAA passes, large text passes

About red-400

In OKLCH, red-400 has a lightness of 70.4%, a chroma of 0.191 and a hue of 22.2 degrees, which makes it a vivid medium red. The step up to red-300 is 10.4 points of lightness, and the step down to red-500 6.7 points.

HSL and OKLCH agree on how light it is, 70% and 70.4%. Red-400 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #ff6467, gives up 0.002 of chroma and moves 0.2 points of lightness and 0.0 degrees of hue; a Display P3 screen shows the full value.

For text, red-400 wants black: 7.27:1 clears even AAA's 7:1, and white at 2.89:1 fails AA. Black text passes on every red shade from red-50 to red-500, 1 shade darker than red-400.

Among the CSS keywords, tomato (#ff6347) comes closest at 0.035 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #ffe7e5
  2. #ffcfcb
  3. #ffb6b2
  4. #ff9c99
  5. #ff8280
  6. #ff6467
  7. #c84d4f
  8. #943738
  9. #632223
  10. #360f10
  11. #0f0202

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. #ff6467
  2. #321816
  3. #caebbd
  4. #3e5237
  5. #cfb0af

Locked as the first of five swatches, red-400 gets #321816, #caebbd, #3e5237, #cfb0af from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using red-400

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

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

Common questions

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

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

Is Tailwind red-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-400: oklch(70.4% 0.191 22.216); #ff6467 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is tomato (#ff6347), 0.035 away in OKLab.

Sources