RecolorOpen Recolor

A vivid medium orange, black text passes AA

Tailwind yellow-600

Tailwind yellow-600 is oklch(68.1% 0.162 75.834) in Tailwind CSS 4.3.3, which is #d08700 as the nearest sRGB hex and rgb(208 135 0). Black text on it reaches 7.15:1, passing WCAG AAA. Recolor (recolor.page) shows it on a real page below.

Last updated

#d08700yellow-600
From the theme file of Tailwind CSS 4.3.3 (--color-yellow-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(68.1% 0.162 75.834)
Hex#d08700, the nearest color in sRGB
RGBrgb(208 135 0)
HSLhsl(39 100% 41%)
OKLCH of the hexoklch(68.2% 0.146 71.5)
CSS variablevar(--color-yellow-600)
Nearest CSS nameperu #cd853f, 0.032 away in OKLab
White text2.94:1: AA fails, AAA fails, large text fails
Black text7.15:1: AA passes, AAA passes, large text passes

About yellow-600

Tailwind yellow-600 is a vivid medium orange: OKLCH lightness 68.1%, chroma 0.162, hue 75.8 degrees. On Tailwind's yellow scale it sits between yellow-500 at 79.5% and yellow-700 at 55.4%. The name says yellow, the eye says orange: at 75.8 degrees, its hue lies nearer orange than yellow.

Its HSL lightness, 41%, says little about how light yellow-600 looks; OKLCH, made to match the eye, measures 68.1%, 27 points away. Its value lies outside sRGB, the colors a hex code can name: #d08700 is what CSS Color 4's gamut mapping makes of it, chroma 0.146 instead of 0.162, moving 0.1 points of lightness and 4.4 degrees of hue. A wide-gamut screen shows the stronger original.

Black text on yellow-600 measures 7.15:1, past the 7:1 of WCAG AAA, while white text manages only 2.94:1. Black text holds AA down to here on the yellow scale; at yellow-700 it falls to 4.26:1.

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

Tints and shades

  1. #f8ebdc
  2. #f1d7ba
  3. #e9c497
  4. #e1b072
  5. #d99b4a
  6. #d08700
  7. #a36900
  8. #784c00
  9. #4f3100
  10. #2a1800
  11. #0a0400

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. #d08700
  2. #142534
  3. #d6b161
  4. #684764
  5. #c9fffd

Recolor's generator, with yellow-600 locked as swatch 1 and the seed taken from its hex, drew a free palette, hues spread around the wheel: #142534, #d6b161, #684764, #c9fffd. Open it in Recolor.

Using yellow-600

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

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

Common questions

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

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

Is Tailwind yellow-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-yellow-600: oklch(68.1% 0.162 75.834); #d08700 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is peru (#cd853f), 0.032 away in OKLab.

Sources