RecolorOpen Recolor

A vivid medium orange, black text passes AA

Tailwind orange-500

Tailwind orange-500 is oklch(70.5% 0.213 47.604) in Tailwind CSS 4.3.3, which is #ff6900 as the nearest sRGB hex and rgb(255 105 0). Black text on it reaches 7.27:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#ff6900orange-500
From the theme file of Tailwind CSS 4.3.3 (--color-orange-500), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(70.5% 0.213 47.604)
Hex#ff6900, the nearest color in sRGB
RGBrgb(255 105 0)
HSLhsl(25 100% 50%)
OKLCH of the hexoklch(70.0% 0.202 44.4)
CSS variablevar(--color-orange-500)
Nearest CSS nametomato #ff6347, 0.043 away in OKLab
White text2.89:1: AA fails, AAA fails, large text fails
Black text7.27:1: AA passes, AAA passes, large text passes

About orange-500

Tailwind orange-500 is a vivid medium orange: OKLCH lightness 70.5%, chroma 0.213, hue 47.6 degrees. On Tailwind's orange scale it sits between orange-400 at 75.0% and orange-600 at 64.6%.

HSL puts its lightness at 50% and OKLCH at 70.5%, 20 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: #ff6900 is what CSS Color 4's gamut mapping makes of it, chroma 0.202 instead of 0.213, moving 0.5 points of lightness and 3.2 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on orange-500 measures 7.27:1, past the 7:1 of WCAG AAA, while white text manages only 2.89:1. Black text passes on every orange shade from orange-50 to orange-600, 1 shade darker than orange-500.

The closest CSS named color is tomato (#ff6347), 0.043 away in OKLab: near, and still a visible step from it side by side.

Tints and shades

  1. #ffe8dd
  2. #ffd1ba
  3. #ffb997
  4. #ffa073
  5. #ff864b
  6. #ff6900
  7. #c85100
  8. #943a00
  9. #632400
  10. #361000
  11. #0f0200

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. #ff6900
  2. #101c22
  3. #fbd9cf
  4. #883e1f
  5. #e2bdac

Recolor's generator, with orange-500 locked as swatch 1 and the seed taken from its hex, drew a complementary palette, built on the hue opposite: #101c22, #fbd9cf, #883e1f, #e2bdac. Open it in Recolor.

Using orange-500

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

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

Common questions

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

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

Is Tailwind orange-500 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-500: oklch(70.5% 0.213 47.604); #ff6900 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is tomato (#ff6347), 0.043 away in OKLab.

Sources