RecolorOpen Recolor

A vivid medium orange, black text passes AA

Tailwind amber-600

The hex code of Tailwind amber-600 is #e17100 (rgb(225 113 0)), from its Tailwind CSS 4.3.3 value oklch(66.6% 0.179 58.318). Black text on it reaches 6.56:1, passing WCAG AA; below, Recolor (recolor.page) puts it on a page.

Last updated

#e17100amber-600
From the theme file of Tailwind CSS 4.3.3 (--color-amber-600), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(66.6% 0.179 58.318)
Hex#e17100, the nearest color in sRGB
RGBrgb(225 113 0)
HSLhsl(30 100% 44%)
OKLCH of the hexoklch(66.7% 0.169 53.4)
CSS variablevar(--color-amber-600)
Nearest CSS namechocolate #d2691e, 0.036 away in OKLab
White text3.20:1: AA fails, AAA fails, large text passes
Black text6.56:1: AA passes, AAA fails, large text passes

About amber-600

Read as numbers, amber-600 is lightness 66.6%, chroma 0.179 and hue 58.3 degrees; read by eye, it is a vivid medium orange. Its neighbors on the amber scale are amber-500, 10.3 points lighter, and amber-700, 11.1 points darker.

HSL puts its lightness at 44% and OKLCH at 66.6%, 22 points apart: HSL's lightness does not follow what the eye sees, OKLCH's is built to. A hex code cannot hold amber-600 exactly: the value is outside sRGB, and #e17100 is the CSS Color 4 gamut mapping of it, chroma lowered by 0.010, 0.1 points of lightness and 4.9 degrees of hue away from the value.

Black is the ink for amber-600: 6.56:1 passes AA for body text, where white stops at 3.20:1. It is the darkest amber shade that still carries black body text; amber-700 drops to 4.17:1.

Of the named colors, chocolate (#d2691e) is the nearest, 0.036 away in OKLab; next to each other the two still differ.

Tints and shades

  1. #fde8dc
  2. #f9d1b8
  3. #f5ba95
  4. #efa271
  5. #e98a48
  6. #e17100
  7. #b05700
  8. #823e00
  9. #562700
  10. #2f1200
  11. #0b0300

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. #e17100
  2. #38192a
  3. #a2d1d6
  4. #824b00
  5. #e7f1cd

Around amber-600 as swatch 1, Recolor's generator made a free palette, hues spread around the wheel: #38192a, #a2d1d6, #824b00, #e7f1cd, drawn from a seed fixed by its hex. Open it in Recolor.

Using amber-600

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

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

Common questions

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

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

Is Tailwind amber-600 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-600: oklch(66.6% 0.179 58.318); #e17100 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is chocolate (#d2691e), 0.036 away in OKLab.

Sources