Tailwind Orange

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

  1. orange-50 #fff7ed · rgb(255, 247, 237) Black 19.8:1 AAA · White 1.1:1 Fail
  2. orange-100 #ffedd5 · rgb(255, 237, 213) Black 18.3:1 AAA · White 1.1:1 Fail
  3. orange-200 #fed7aa · rgb(254, 215, 170) Black 15.5:1 AAA · White 1.4:1 Fail
  4. orange-300 #fdba74 · rgb(253, 186, 116) Black 12.5:1 AAA · White 1.7:1 Fail
  5. orange-400 #fb923c · rgb(251, 146, 60) Black 9.3:1 AAA · White 2.3:1 Fail
  6. orange-500 #f97316 · rgb(249, 115, 22) Black 7.5:1 AAA · White 2.8:1 Fail
  7. orange-600 #ea580c · rgb(234, 88, 12) Black 5.9:1 AA · White 3.6:1 Fail
  8. orange-700 #c2410c · rgb(194, 65, 12) Black 4.1:1 Fail · White 5.2:1 AA
  9. orange-800 #9a3412 · rgb(154, 52, 18) Black 2.9:1 Fail · White 7.3:1 AAA
  10. orange-900 #7c2d12 · rgb(124, 45, 18) Black 2.2:1 Fail · White 9.4:1 AAA
  11. orange-950 #431407 · rgb(67, 20, 7) Black 1.3:1 Fail · White 15.7:1 AAA

Copy into CSS

The official orange steps as Tailwind theme variables.

@theme {
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
}