RecolorOpen Recolor

A dark brown, white text passes AA

Tailwind yellow-800

The hex code of Tailwind yellow-800 is #894b00 (rgb(137 75 0)), from its Tailwind CSS 4.3.3 value oklch(47.6% 0.114 61.907). White text on it reaches 6.84:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#894b00yellow-800
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-800), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(47.6% 0.114 61.907)
Hex#894b00, the nearest color in sRGB
RGBrgb(137 75 0)
HSLhsl(33 100% 27%)
OKLCH of the hexoklch(47.8% 0.112 60.4)
CSS variablevar(--color-yellow-800)
Nearest CSS namesaddlebrown #8b4513, 0.020 away in OKLab
White text6.84:1: AA passes, AAA fails, large text passes
Black text3.07:1: AA fails, AAA fails, large text passes

About yellow-800

Read as numbers, yellow-800 is lightness 47.6%, chroma 0.114 and hue 61.9 degrees; read by eye, it is a dark brown. Its neighbors on the yellow scale are yellow-700, 7.8 points lighter, and yellow-900, 5.5 points darker. The name says yellow, the eye says brown: at 61.9 degrees, dark oranges and yellows look brown.

Its HSL lightness, 27%, says little about how light yellow-800 looks; OKLCH, made to match the eye, measures 47.6%, 21 points away. A hex code cannot hold yellow-800 exactly: the value is outside sRGB, and #894b00 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.002, 0.2 points of lightness and 1.5 degrees of hue away from the value.

White is the ink for yellow-800: 6.84:1 passes AA for body text, where black stops at 3.07:1. On the yellow scale white text works from yellow-700 to yellow-950; yellow-800 has 1 shade of margin.

The CSS keyword saddlebrown (#8b4513) is almost the same color: 0.020 apart in OKLab, under the step most people notice.

Tints and shades

  1. #ece0d6
  2. #d9c1ae
  3. #c5a387
  4. #b18561
  5. #9d6839
  6. #894b00
  7. #6a3900
  8. #4d2800
  9. #311700
  10. #180900
  11. #040100

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. #894b00
  2. #ceae93
  3. #2c190b
  4. #fdece0
  5. #c07f39

Around yellow-800 as swatch 1, Recolor's generator made a monochromatic palette, one hue in five lightnesses: #ceae93, #2c190b, #fdece0, #c07f39, drawn from a seed fixed by its hex. Open it in Recolor.

Using yellow-800

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

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

Common questions

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

Yes. White text measures 6.84:1 on yellow-800, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind yellow-800 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-800: oklch(47.6% 0.114 61.907); #894b00 is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: saddlebrown (#8b4513) is 0.020 away in OKLab, too close to tell apart by eye.

Sources