Tailwind Yellow

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

  1. yellow-50 #fefce8 · rgb(254, 252, 232) Black 20.3:1 AAA · White 1.0:1 Fail
  2. yellow-100 #fef9c3 · rgb(254, 249, 195) Black 19.6:1 AAA · White 1.1:1 Fail
  3. yellow-200 #fef08a · rgb(254, 240, 138) Black 18.0:1 AAA · White 1.2:1 Fail
  4. yellow-300 #fde047 · rgb(253, 224, 71) Black 15.9:1 AAA · White 1.3:1 Fail
  5. yellow-400 #facc15 · rgb(250, 204, 21) Black 13.7:1 AAA · White 1.5:1 Fail
  6. yellow-500 #eab308 · rgb(234, 179, 8) Black 11.0:1 AAA · White 1.9:1 Fail
  7. yellow-600 #ca8a04 · rgb(202, 138, 4) Black 7.1:1 AAA · White 2.9:1 Fail
  8. yellow-700 #a16207 · rgb(161, 98, 7) Black 4.3:1 Fail · White 4.9:1 AA
  9. yellow-800 #854d0e · rgb(133, 77, 14) Black 3.1:1 Fail · White 6.9:1 AA
  10. yellow-900 #713f12 · rgb(113, 63, 18) Black 2.4:1 Fail · White 8.7:1 AAA
  11. yellow-950 #422006 · rgb(66, 32, 6) Black 1.4:1 Fail · White 14.6:1 AAA

Copy into CSS

The official yellow steps as Tailwind theme variables.

@theme {
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
}