RecolorOpen Recolor

A vivid light orange, black text passes AA

Tailwind orange-400

The hex code of Tailwind orange-400 is #ff8904 (rgb(255 137 4)), from its Tailwind CSS 4.3.3 value oklch(75% 0.183 55.934). Black text on it reaches 8.83:1, passing WCAG AAA; below, Recolor (recolor.page) puts it on a page.

Last updated

#ff8904orange-400
From the theme file of Tailwind CSS 4.3.3 (--color-orange-400), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(75% 0.183 55.934)
Hex#ff8904, the nearest color in sRGB
RGBrgb(255 137 4)
HSLhsl(32 100% 51%)
OKLCH of the hexoklch(74.6% 0.180 56.7)
CSS variablevar(--color-orange-400)
Nearest CSS namedarkorange #ff8c00, 0.007 away in OKLab
White text2.38:1: AA fails, AAA fails, large text fails
Black text8.83:1: AA passes, AAA passes, large text passes

About orange-400

Read as numbers, orange-400 is lightness 75.0%, chroma 0.183 and hue 55.9 degrees; read by eye, it is a vivid light orange. Its neighbors on the orange scale are orange-300, 8.7 points lighter, and orange-500, 4.5 points darker.

Its HSL lightness, 51%, says little about how light orange-400 looks; OKLCH, made to match the eye, measures 75.0%, 24 points away. A hex code cannot hold orange-400 exactly: the value is outside sRGB, and #ff8904 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.003, 0.4 points of lightness and 0.8 degrees of hue away from the value.

Black on orange-400 reads at 8.83:1, enough for AAA body text; white reaches 2.38:1 and should stay off it. On the orange scale black text works down to orange-600, which leaves orange-400 2 shades of margin.

The CSS keyword darkorange (#ff8c00) is almost the same color: 0.007 apart in OKLab, under the step most people notice.

Tints and shades

  1. #ffedde
  2. #ffdabd
  3. #ffc79b
  4. #ffb378
  5. #ff9e4f
  6. #ff8904
  7. #c86a02
  8. #944d01
  9. #633101
  10. #361800
  11. #0f0400

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. #ff8904
  2. #66442b
  3. #ffecd9
  4. #a97f5a
  5. #092132

Around orange-400 as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #66442b, #ffecd9, #a97f5a, #092132, drawn from a seed fixed by its hex. Open it in Recolor.

Using orange-400

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

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

Common questions

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

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

Is Tailwind orange-400 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-400: oklch(75% 0.183 55.934); #ff8904 is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: darkorange (#ff8c00) is 0.007 away in OKLab, too close to tell apart by eye.

Sources