RecolorOpen Recolor

A dark brown, white text passes AA

Tailwind yellow-900

Tailwind yellow-900 is oklch(42.1% 0.095 57.708) in Tailwind CSS 4.3.3, which is #733e0a in hex and rgb(115 62 10). White text on it reaches 8.67:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#733e0ayellow-900
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(42.1% 0.095 57.708)
Hex#733e0a
RGBrgb(115 62 10)
HSLhsl(30 84% 25%)
CSS variablevar(--color-yellow-900)
Nearest CSS namesaddlebrown #8b4513, 0.054 away in OKLab
White text8.67:1: AA passes, AAA passes, large text passes
Black text2.42:1: AA fails, AAA fails, large text fails

About yellow-900

Tailwind yellow-900 is a dark brown: OKLCH lightness 42.1%, chroma 0.095, hue 57.7 degrees. On Tailwind's yellow scale it sits between yellow-800 at 47.6% and yellow-950 at 28.6%. Despite the name, yellow-900 reads as a dark brown: dark oranges and yellows look brown.

HSL puts its lightness at 25% and OKLCH at 42.1%, 18 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Its value fits inside sRGB, so #733e0a is the same color, not an approximation.

White text on yellow-900 measures 8.67:1, past the 7:1 of WCAG AAA, while black text manages only 2.42:1. White text passes on every yellow shade from yellow-700 down, so yellow-900 is 2 shades past the line.

The nearest CSS named color, saddlebrown (#8b4513), is 0.054 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #e8ddd5
  2. #d0bbac
  3. #b99b85
  4. #a27b5e
  5. #8b5c38
  6. #733e0a
  7. #592f06
  8. #402003
  9. #281201
  10. #130600
  11. #030100

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. #733e0a
  2. #ffd1a1
  3. #0090e5
  4. #071c27
  5. #f89550

Recolor's generator, with yellow-900 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #ffd1a1, #0090e5, #071c27, #f89550. Open it in Recolor.

Using yellow-900

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

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

Common questions

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

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

Is Tailwind yellow-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-900: oklch(42.1% 0.095 57.708); #733e0a is its conversion to sRGB.

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

No. The nearest CSS named color is saddlebrown (#8b4513), 0.054 away in OKLab.

Sources