Tailwind Amber

Eleven steps from amber-50 to amber-950. amber-500 is #f59e0b. Open any hex in the explorer to see its OKLCH, a generated scale, and how it looks in color-vision simulations.

  1. amber-50 #fffbeb · rgb(255, 251, 235) Black 20.3:1 AAA · White 1.0:1 Fail
  2. amber-100 #fef3c7 · rgb(254, 243, 199) Black 18.9:1 AAA · White 1.1:1 Fail
  3. amber-200 #fde68a · rgb(253, 230, 138) Black 16.9:1 AAA · White 1.2:1 Fail
  4. amber-300 #fcd34d · rgb(252, 211, 77) Black 14.6:1 AAA · White 1.4:1 Fail
  5. amber-400 #fbbf24 · rgb(251, 191, 36) Black 12.6:1 AAA · White 1.7:1 Fail
  6. amber-500 #f59e0b · rgb(245, 158, 11) Black 9.8:1 AAA · White 2.1:1 Fail
  7. amber-600 #d97706 · rgb(217, 119, 6) Black 6.6:1 AA · White 3.2:1 Fail
  8. amber-700 #b45309 · rgb(180, 83, 9) Black 4.2:1 Fail · White 5.0:1 AA
  9. amber-800 #92400e · rgb(146, 64, 14) Black 3.0:1 Fail · White 7.1:1 AAA
  10. amber-900 #78350f · rgb(120, 53, 15) Black 2.3:1 Fail · White 9.1:1 AAA
  11. amber-950 #451a03 · rgb(69, 26, 3) Black 1.4:1 Fail · White 15.0:1 AAA

Copy into CSS

The official amber steps as Tailwind theme variables.

@theme {
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  --color-amber-950: #451a03;
}