RecolorOpen Recolor

A dark brown, white text passes AA

Tailwind orange-900

In Tailwind CSS 4.3.3, orange-900 is defined as oklch(40.8% 0.123 38.172); in hex that is #7e2a0c, or rgb(126 42 12). White text on it reaches 9.44:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#7e2a0corange-900
From the theme file of Tailwind CSS 4.3.3 (--color-orange-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(40.8% 0.123 38.172)
Hex#7e2a0c
RGBrgb(126 42 12)
HSLhsl(16 83% 27%)
CSS variablevar(--color-orange-900)
Nearest CSS namedarkred #8b0000, 0.047 away in OKLab
White text9.44:1: AA passes, AAA passes, large text passes
Black text2.22:1: AA fails, AAA fails, large text fails

About orange-900

In OKLCH, orange-900 has a lightness of 40.8%, a chroma of 0.123 and a hue of 38.2 degrees, which makes it a dark brown. The step up to orange-800 is 6.2 points of lightness, and the step down to orange-950 14.2 points.

HSL calls its lightness 27%, OKLCH 40.8%: 14 points between a formula and a measure of what the eye sees. The value lies inside sRGB, the gamut of a hex code, so orange-900 converts to #7e2a0c without losing chroma.

For text, orange-900 wants white: 9.44:1 clears even AAA's 7:1, and black at 2.22:1 fails AA. White text passes on every orange shade from orange-700 down, so orange-900 is 2 shades past the line.

Among the CSS keywords, darkred (#8b0000) comes closest at 0.047 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #ebdad5
  2. #d7b6ac
  3. #c29384
  4. #ac705e
  5. #964e38
  6. #7e2a0c
  7. #611f07
  8. #461404
  9. #2d0a02
  10. #150300
  11. #030000

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. #7e2a0c
  2. #ddc897
  3. #231f2c
  4. #ffddc8
  5. #5796c6

Locked as the first of five swatches, orange-900 gets #ddc897, #231f2c, #ffddc8, #5796c6 from Recolor's generator, a free palette, hues spread around the wheel. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using orange-900

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

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

Common questions

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

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

Is Tailwind orange-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-900: oklch(40.8% 0.123 38.172); #7e2a0c is its conversion to sRGB.

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

No. The nearest CSS named color is darkred (#8b0000), 0.047 away in OKLab.

Sources