RecolorOpen Recolor

A vivid light orange, black text passes AA

Tailwind amber-400

Tailwind amber-400 is oklch(82.8% 0.189 84.429) in Tailwind CSS 4.3.3, which is #ffba00 as the nearest sRGB hex and rgb(255 186 0). Black text on it reaches 12.28:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ffba00amber-400
From the theme file of Tailwind CSS 4.3.3 (--color-amber-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(82.8% 0.189 84.429)
Hex#ffba00, the nearest color in sRGB
RGBrgb(255 186 0)
HSLhsl(44 100% 50%)
OKLCH of the hexoklch(83.1% 0.171 81.5)
CSS variablevar(--color-amber-400)
Nearest CSS nameorange #ffa500, 0.050 away in OKLab
White text1.71:1: AA fails, AAA fails, large text fails
Black text12.28:1: AA passes, AAA passes, large text passes

About amber-400

Tailwind amber-400 is a vivid light orange: OKLCH lightness 82.8%, chroma 0.189, hue 84.4 degrees. On Tailwind's amber scale it sits between amber-300 at 87.9% and amber-500 at 76.9%.

HSL puts its lightness at 50% and OKLCH at 82.8%, 33 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. Its value lies outside sRGB, the colors a hex code can name: #ffba00 is what CSS Color 4's gamut mapping makes of it, chroma 0.171 instead of 0.189, moving 0.3 points of lightness and 2.9 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on amber-400 measures 12.28:1, past the 7:1 of WCAG AAA, while white text manages only 1.71:1. Black text passes on every amber shade from amber-50 to amber-600, 2 shades darker than amber-400.

The nearest CSS named color, orange (#ffa500), is 0.050 away in OKLab: related, but plainly a different color.

Tints and shades

  1. #fff4e1
  2. #ffe9c2
  3. #ffdea2
  4. #ffd27f
  5. #ffc656
  6. #ffba00
  7. #c89100
  8. #946a00
  9. #634600
  10. #362500
  11. #0f0700

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. #ffba00
  2. #6f4a00
  3. #ffe0a9
  4. #3c2200
  5. #c68000

Recolor's generator, with amber-400 locked as swatch 1 and the seed taken from its hex, drew a monochromatic palette, one hue in five lightnesses: #6f4a00, #ffe0a9, #3c2200, #c68000. Open it in Recolor.

Using amber-400

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

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

Common questions

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

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

Is Tailwind amber-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-400: oklch(82.8% 0.189 84.429); #ffba00 is its nearest sRGB color, since the value lies outside sRGB.

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

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

Sources