RecolorOpen Recolor

A vivid dark red-orange, white text passes AA

Tailwind orange-800

Tailwind orange-800 is oklch(47% 0.157 37.304) in Tailwind CSS 4.3.3, which is #9f2d00 as the nearest sRGB hex and rgb(159 45 0). White text on it reaches 7.37:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#9f2d00orange-800
From the theme file of Tailwind CSS 4.3.3 (--color-orange-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(47% 0.157 37.304)
Hex#9f2d00, the nearest color in sRGB
RGBrgb(159 45 0)
HSLhsl(17 100% 31%)
OKLCH of the hexoklch(47.0% 0.157 37.1)
CSS variablevar(--color-orange-800)
Nearest CSS namebrown #a52a2a, 0.034 away in OKLab
White text7.37:1: AA passes, AAA passes, large text passes
Black text2.85:1: AA fails, AAA fails, large text fails

About orange-800

Tailwind orange-800 is a vivid dark red-orange: OKLCH lightness 47.0%, chroma 0.157, hue 37.3 degrees. On Tailwind's orange scale it sits between orange-700 at 55.3% and orange-900 at 40.8%. The name says orange, the eye says red-orange: at 37.3 degrees, its hue lies between red and orange.

Its HSL lightness, 31%, says little about how light orange-800 looks; OKLCH, made to match the eye, measures 47.0%, 16 points away. Its value lies outside sRGB, the colors a hex code can name: #9f2d00 is what CSS Color 4's gamut mapping makes of it, chroma 0.157 instead of 0.157, moving 0.0 points of lightness and 0.2 degrees of hue. A wide-gamut screen shows the stronger original.

White text on orange-800 measures 7.37:1, past the 7:1 of WCAG AAA, while black text manages only 2.85:1. On the orange scale white text works from orange-700 to orange-950; orange-800 has 1 shade of margin.

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

Tints and shades

  1. #f2dcd6
  2. #e4baae
  3. #d59886
  4. #c5765f
  5. #b35438
  6. #9f2d00
  7. #7c2100
  8. #5a1600
  9. #3b0b00
  10. #1e0300
  11. #050000

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. #9f2d00
  2. #e3b7b3
  3. #351d14
  4. #ffe0c5
  5. #8e7a60

Recolor's generator, with orange-800 locked as swatch 1 and the seed taken from its hex, drew an analogous palette, hues next to each other on the wheel: #e3b7b3, #351d14, #ffe0c5, #8e7a60. Open it in Recolor.

Using orange-800

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

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

Common questions

Does white text pass WCAG AA on Tailwind orange-800?

Yes. White text measures 7.37:1 on orange-800, above the 4.5:1 that WCAG AA asks of body text, and above AAA's 7:1 too.

Is Tailwind orange-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-800: oklch(47% 0.157 37.304); #9f2d00 is its nearest sRGB color, since the value lies outside sRGB.

Is there a CSS named color for Tailwind orange-800?

No. The nearest CSS named color is brown (#a52a2a), 0.034 away in OKLab.

Sources