RecolorOpen Recolor

A vivid medium red, white text passes AA

Tailwind red-700

In Tailwind CSS 4.3.3, red-700 is defined as oklch(50.5% 0.213 27.518); as the nearest sRGB hex that is #c10007, or rgb(193 0 7). White text on it reaches 6.42:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#c10007red-700
From the theme file of Tailwind CSS 4.3.3 (--color-red-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(50.5% 0.213 27.518)
Hex#c10007, the nearest color in sRGB
RGBrgb(193 0 7)
HSLhsl(358 100% 38%)
OKLCH of the hexoklch(50.9% 0.209 28.5)
CSS variablevar(--color-red-700)
Nearest CSS namefirebrick #b22222, 0.032 away in OKLab
White text6.42:1: AA passes, AAA fails, large text passes
Black text3.27:1: AA fails, AAA fails, large text passes

About red-700

In OKLCH, red-700 has a lightness of 50.5%, a chroma of 0.213 and a hue of 27.5 degrees, which makes it a vivid medium red. The step up to red-600 is 7.2 points of lightness, and the step down to red-800 6.1 points.

Its lightness is 38% in HSL and 50.5% in OKLCH, 13 points apart; only the second tracks how light it looks. Red-700 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #c10007, gives up 0.004 of chroma and moves 0.4 points of lightness and 1.0 degrees of hue; a Display P3 screen shows the full value.

With white text, red-700 passes AA at 6.42:1. Black text, at 3.27:1, does not. On the red scale white text works from red-600 to red-950; red-700 has 1 shade of margin.

Among the CSS keywords, firebrick (#b22222) comes closest at 0.032 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #fbdcd7
  2. #f4b9b0
  3. #ea968a
  4. #df7164
  5. #d1493d
  6. #c10007
  7. #970004
  8. #6f0002
  9. #490001
  10. #260000
  11. #080000

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. #c10007
  2. #ffd8cf
  3. #62857d
  4. #372422
  5. #add4c9

Locked as the first of five swatches, red-700 gets #ffd8cf, #62857d, #372422, #add4c9 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using red-700

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

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

Common questions

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

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

Is Tailwind red-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-red-700: oklch(50.5% 0.213 27.518); #c10007 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is firebrick (#b22222), 0.032 away in OKLab.

Sources