RecolorOpen Recolor

Eleven shades, from amber-50 to amber-950

Tailwind amber colors

Tailwind CSS 4.3.3 defines eleven amber shades in OKLCH, from amber-50 (#fffbeb) to amber-950 (#461901). On them white text passes WCAG AA from amber-700 to amber-950, and black text from amber-50 to amber-600. Recolor (recolor.page) shows the scale on a real page.

Last updated

  1. 50#fffbeb
  2. 100#fef3c6
  3. 200#fee685
  4. 300#ffd230
  5. 400#ffba00
  6. 500#fd9a00
  7. 600#e17100
  8. 700#bb4d00
  9. 800#973c00
  10. 900#7b3306
  11. 950#461901
From the theme file of Tailwind CSS 4.3.3, converted with Recolor's color code, October 9, 2026; contrast as WCAG 2.2 defines it
ShadeOKLCHHexWhite textBlack text
amber-50oklch(98.7% 0.022 95.277)#fffbeb1.04:1 fails20.25:1 passes
amber-100oklch(96.2% 0.059 95.617)#fef3c61.11:1 fails18.85:1 passes
amber-200oklch(92.4% 0.12 95.746)#fee6851.24:1 fails16.87:1 passes
amber-300oklch(87.9% 0.169 91.605)#ffd2301.45:1 fails14.51:1 passes
amber-400oklch(82.8% 0.189 84.429)#ffba001.71:1 fails12.28:1 passes
amber-500oklch(76.9% 0.188 70.08)#fd9a002.14:1 fails9.80:1 passes
amber-600oklch(66.6% 0.179 58.318)#e171003.20:1 fails6.56:1 passes
amber-700oklch(55.5% 0.163 48.998)#bb4d005.03:1 passes4.17:1 fails
amber-800oklch(47.3% 0.137 46.201)#973c007.09:1 passes2.96:1 fails
amber-900oklch(41.4% 0.112 45.904)#7b33069.06:1 passes2.32:1 fails
amber-950oklch(27.9% 0.077 45.635)#46190115.00:1 passes1.40:1 fails

Text on amber, and amber as text

As a text color the rule turns around: amber text on a white page passes AA from amber-700 on, and on a black page up to amber-600, since a contrast ratio is the same whichever color is in front.

Chroma peaks at amber-400 (0.189) and falls toward both ends, while the hue drifts 50.1 degrees across the scale.

7 of the eleven lie outside sRGB, so their hex codes are the nearest sRGB colors, and a wide-gamut screen shows them stronger.

Sources