Tailwind Rose

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

  1. rose-50 #fff1f2 · rgb(255, 241, 242) Black 19.1:1 AAA · White 1.1:1 Fail
  2. rose-100 #ffe4e6 · rgb(255, 228, 230) Black 17.5:1 AAA · White 1.2:1 Fail
  3. rose-200 #fecdd3 · rgb(254, 205, 211) Black 14.9:1 AAA · White 1.4:1 Fail
  4. rose-300 #fda4af · rgb(253, 164, 175) Black 11.1:1 AAA · White 1.9:1 Fail
  5. rose-400 #fb7185 · rgb(251, 113, 133) Black 7.8:1 AAA · White 2.7:1 Fail
  6. rose-500 #f43f5e · rgb(244, 63, 94) Black 5.7:1 AA · White 3.7:1 Fail
  7. rose-600 #e11d48 · rgb(225, 29, 72) Black 4.5:1 Fail · White 4.7:1 AA
  8. rose-700 #be123c · rgb(190, 18, 60) Black 3.3:1 Fail · White 6.3:1 AA
  9. rose-800 #9f1239 · rgb(159, 18, 57) Black 2.6:1 Fail · White 8.0:1 AAA
  10. rose-900 #881337 · rgb(136, 19, 55) Black 2.2:1 Fail · White 9.6:1 AAA
  11. rose-950 #4c0519 · rgb(76, 5, 25) Black 1.3:1 Fail · White 15.6:1 AAA

Copy into CSS

The official rose steps as Tailwind theme variables.

@theme {
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
}