RecolorOpen Recolor

A dark brown, white text passes AA

Tailwind amber-900

The hex code of Tailwind amber-900 is #7b3306 (rgb(123 51 6)), from its Tailwind CSS 4.3.3 value oklch(41.4% 0.112 45.904). White text on it reaches 9.06:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#7b3306amber-900
From the theme file of Tailwind CSS 4.3.3 (--color-amber-900), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(41.4% 0.112 45.904)
Hex#7b3306
RGBrgb(123 51 6)
HSLhsl(23 91% 25%)
CSS variablevar(--color-amber-900)
Nearest CSS namesaddlebrown #8b4513, 0.057 away in OKLab
White text9.06:1: AA passes, AAA passes, large text passes
Black text2.32:1: AA fails, AAA fails, large text fails

About amber-900

Read as numbers, amber-900 is lightness 41.4%, chroma 0.112 and hue 45.9 degrees; read by eye, it is a dark brown. Its neighbors on the amber scale are amber-800, 5.9 points lighter, and amber-950, 13.5 points darker.

Its HSL lightness, 25%, says little about how light amber-900 looks; OKLCH, made to match the eye, measures 41.4%, 16 points away. No gamut mapping is needed here: oklch(41.4% 0.112 45.904) sits inside sRGB and #7b3306 matches it.

White on amber-900 reads at 9.06:1, enough for AAA body text; black reaches 2.32:1 and should stay off it. On the amber scale white text works from amber-700 to amber-950; amber-900 has 2 shades of margin.

No CSS keyword matches it; saddlebrown (#8b4513) is the nearest, 0.057 away in OKLab, a clear step off.

Tints and shades

  1. #eadbd5
  2. #d5b8ac
  3. #bf9684
  4. #a9755d
  5. #925436
  6. #7b3306
  7. #5f2603
  8. #451902
  9. #2c0d01
  10. #150400
  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. #7b3306
  2. #f39d7f
  3. #003127
  4. #fff1b8
  5. #a27db2

Around amber-900 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #f39d7f, #003127, #fff1b8, #a27db2, drawn from a seed fixed by its hex. Open it in Recolor.

Using amber-900

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

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

Common questions

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

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

Is Tailwind amber-900 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-900: oklch(41.4% 0.112 45.904); #7b3306 is its conversion to sRGB.

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

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

Sources