RecolorOpen Recolor

A vivid medium orange, white text passes AA

Tailwind amber-700

Tailwind amber-700 is oklch(55.5% 0.163 48.998) in Tailwind CSS 4.3.3, which is #bb4d00 as the nearest sRGB hex and rgb(187 77 0). White text on it reaches 5.03:1, passing WCAG AA. Recolor (recolor.page) shows it on a real page below.

Last updated

#bb4d00amber-700
From the theme file of Tailwind CSS 4.3.3 (--color-amber-700), converted with Recolor's color code, October 9, 2026
FormatValue
OKLCH, as Tailwind writes itoklch(55.5% 0.163 48.998)
Hex#bb4d00, the nearest color in sRGB
RGBrgb(187 77 0)
HSLhsl(25 100% 37%)
OKLCH of the hexoklch(55.7% 0.158 45.4)
CSS variablevar(--color-amber-700)
Nearest CSS namesienna #a0522d, 0.053 away in OKLab
White text5.03:1: AA passes, AAA fails, large text passes
Black text4.17:1: AA fails, AAA fails, large text passes

About amber-700

Tailwind amber-700 is a vivid medium orange: OKLCH lightness 55.5%, chroma 0.163, hue 49.0 degrees. On Tailwind's amber scale it sits between amber-600 at 66.6% and amber-800 at 47.3%.

Its HSL lightness, 37%, says little about how light amber-700 looks; OKLCH, made to match the eye, measures 55.5%, 19 points away. Its value lies outside sRGB, the colors a hex code can name: #bb4d00 is what CSS Color 4's gamut mapping makes of it, chroma 0.158 instead of 0.163, moving 0.2 points of lightness and 3.6 degrees of hue. A wide-gamut screen shows the stronger original.

White text on amber-700 reaches 5.03:1, enough for WCAG AA body text but short of AAA's 7:1; black text gets 4.17:1. Going down the amber scale, white text first reaches AA here; one shade lighter, amber-600 gives it 3.20:1.

No CSS keyword matches it; sienna (#a0522d) is the nearest, 0.053 away in OKLab, a clear step off.

Tints and shades

  1. #f7e2d8
  2. #edc4b2
  3. #e2a78d
  4. #d68a67
  5. #c96d3f
  6. #bb4d00
  7. #923a00
  8. #6b2900
  9. #461800
  10. #250900
  11. #080100

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. #bb4d00
  2. #ffd6be
  3. #0f1f1a
  4. #88d6b8
  5. #74412a

Recolor's generator, with amber-700 locked as swatch 1 and the seed taken from its hex, drew a triadic palette, three hues a third of the wheel apart: #ffd6be, #0f1f1a, #88d6b8, #74412a. Open it in Recolor.

Using amber-700

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

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

Common questions

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

Yes. White text measures 5.03:1 on amber-700, above the 4.5:1 that WCAG AA asks of body text.

Is Tailwind amber-700 defined in OKLCH?

Yes. Tailwind CSS 4.3.3 defines it as --color-amber-700: oklch(55.5% 0.163 48.998); #bb4d00 is its nearest sRGB color, since the value lies outside sRGB.

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

No. The nearest CSS named color is sienna (#a0522d), 0.053 away in OKLab.

Sources