RecolorOpen Recolor

A vivid medium red-orange, black text passes AA

Tailwind orange-600

In Tailwind CSS 4.3.3, orange-600 is defined as oklch(64.6% 0.222 41.116); as the nearest sRGB hex that is #f54a00, or rgb(245 74 0). Black text on it reaches 5.86:1, passing WCAG AA, and Recolor (recolor.page) can show it on a real page.

Last updated

#f54a00orange-600
From the theme file of Tailwind CSS 4.3.3 (--color-orange-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(64.6% 0.222 41.116)
Hex#f54a00, the nearest color in sRGB
RGBrgb(245 74 0)
HSLhsl(18 100% 48%)
OKLCH of the hexoklch(64.8% 0.217 37.1)
CSS variablevar(--color-orange-600)
Nearest CSS nameorangered #ff4500, 0.019 away in OKLab
White text3.58:1: AA fails, AAA fails, large text passes
Black text5.86:1: AA passes, AAA fails, large text passes

About orange-600

In OKLCH, orange-600 has a lightness of 64.6%, a chroma of 0.222 and a hue of 41.1 degrees, which makes it a vivid medium red-orange. The step up to orange-500 is 5.9 points of lightness, and the step down to orange-700 9.3 points. The name says orange, the eye says red-orange: at 41.1 degrees, its hue lies between red and orange.

Its HSL lightness, 48%, says little about how light orange-600 looks; OKLCH, made to match the eye, measures 64.6%, 17 points away. Orange-600 is one of the 95 colors in Tailwind CSS 4.3.3 that sRGB cannot hold. Its hex, #f54a00, gives up 0.005 of chroma and moves 0.2 points of lightness and 4.0 degrees of hue; a Display P3 screen shows the full value.

With black text, orange-600 passes AA at 5.86:1. White text, at 3.58:1, does not. Black text holds AA down to here on the orange scale; at orange-700 it falls to 4.02:1.

The CSS keyword orangered (#ff4500) is almost the same color: 0.019 apart in OKLab, under the step most people notice.

Tints and shades

  1. #ffe4db
  2. #ffc9b7
  3. #ffac93
  4. #ff8f6e
  5. #fb7046
  6. #f54a00
  7. #c03800
  8. #8e2700
  9. #5f1700
  10. #340800
  11. #0e0100

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. #f54a00
  2. #30221e
  3. #84c299
  4. #795247
  5. #c0fcda

Locked as the first of five swatches, orange-600 gets #30221e, #84c299, #795247, #c0fcda from Recolor's generator, a triadic palette, three hues a third of the wheel apart. The seed is its hex, so the palette stays the same. Open it in Recolor.

Using orange-600

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

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

Common questions

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

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

Is Tailwind orange-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-orange-600: oklch(64.6% 0.222 41.116); #f54a00 is its nearest sRGB color, since the value lies outside sRGB.

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

Yes, nearly: orangered (#ff4500) is 0.019 away in OKLab, too close to tell apart by eye.

Sources