RecolorOpen Recolor

A vivid light orange, black text passes AA

Tailwind amber-500

In Tailwind CSS 4.3.3, amber-500 is defined as oklch(76.9% 0.188 70.08); as the nearest sRGB hex that is #fd9a00, or rgb(253 154 0). Black text on it reaches 9.80:1, passing WCAG AAA, and Recolor (recolor.page) can show it on a real page.

Last updated

#fd9a00amber-500
From the theme file of Tailwind CSS 4.3.3 (--color-amber-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(76.9% 0.188 70.08)
Hex#fd9a00, the nearest color in sRGB
RGBrgb(253 154 0)
HSLhsl(37 100% 50%)
OKLCH of the hexoklch(77.1% 0.172 65.7)
CSS variablevar(--color-amber-500)
Nearest CSS nameorange #ffa500, 0.026 away in OKLab
White text2.14:1: AA fails, AAA fails, large text fails
Black text9.80:1: AA passes, AAA passes, large text passes

About amber-500

In OKLCH, amber-500 has a lightness of 76.9%, a chroma of 0.188 and a hue of 70.1 degrees, which makes it a vivid light orange. The step up to amber-400 is 5.9 points of lightness, and the step down to amber-600 10.3 points.

Its HSL lightness, 50%, says little about how light amber-500 looks; OKLCH, made to match the eye, measures 76.9%, 27 points away. Amber-500 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #fd9a00, gives up 0.016 of chroma and moves 0.2 points of lightness and 4.4 degrees of hue; a Display P3 screen shows the full value.

For text, amber-500 wants black: 9.80:1 clears even AAA's 7:1, and white at 2.14:1 fails AA. On the amber scale black text works down to amber-600, which leaves amber-500 1 shade of margin.

Among the CSS keywords, orange (#ffa500) comes closest at 0.026 in OKLab, close enough to stand in for it in a sketch.

Tints and shades

  1. #ffefdf
  2. #ffdfbe
  3. #ffce9d
  4. #ffbe7a
  5. #ffac51
  6. #fd9a00
  7. #c77800
  8. #935700
  9. #623900
  10. #361d00
  11. #0e0500

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. #fd9a00
  2. #486068
  3. #f9e8d9
  4. #281908
  5. #687cc4

Locked as the first of five swatches, amber-500 gets #486068, #f9e8d9, #281908, #687cc4 from Recolor's generator, a split-complementary palette, built on the two hues beside its opposite. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using amber-500

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

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

Common questions

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

No. White text measures 2.14:1 on amber-500, under AA's 4.5:1; black text measures 9.80:1 and passes. The lightest amber shade for white text is amber-700.

Is Tailwind amber-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-500: oklch(76.9% 0.188 70.08); #fd9a00 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is orange (#ffa500), 0.026 away in OKLab.

Sources