Tailwind red color palette
red-50 to red-950 in Tailwind v4 OKLCH, sRGB hex and the v3 hex. red-500 is #FB2C36 in v4 and #EF4444 in v3.
Every red shade: class, OKLCH, hex and v3 hex
| Shade | Class | v4 OKLCH | v4 hex | v3 hex | Nearest named color |
|---|---|---|---|---|---|
| red-50 | bg-red-50 | oklch(97.1% 0.013 17.38) | #FEF2F2 | #FEF2F2 | Very Light Pink #FFF4F2 |
| red-100 | bg-red-100 | oklch(93.6% 0.032 17.717) | #FFE2E2 | #FEE2E2 | Misty Rose #FFE4E1 |
| red-200 | bg-red-200 | oklch(88.5% 0.062 18.334) | #FFC9C9 | #FECACA | Light Rose #FFC5CB |
| red-300 | bg-red-300 | oklch(80.8% 0.114 19.571) | #FFA2A2 | #FCA5A5 | Peachy Pink #FF9A8A |
| red-400 | bg-red-400 | oklch(70.4% 0.191 22.216) | #FF6467 | #F87171 | Coral Pink #FF6163 |
| red-500 | bg-red-500 | oklch(63.7% 0.237 25.331) | #FB2C36 | #EF4444 | Strawberry #FB2943 |
| red-600 | bg-red-600 | oklch(57.7% 0.245 27.325) | #E7000B | #DC2626 | Tomato Red #EC2D01 |
| red-700 | bg-red-700 | oklch(50.5% 0.213 27.518) | #C10007 | #B91C1C | Scarlet #BE0119 |
| red-800 | bg-red-800 | oklch(44.4% 0.177 26.899) | #9F0712 | #991B1B | Carmine #9D0216 |
| red-900 | bg-red-900 | oklch(39.6% 0.141 25.723) | #82181A | #7F1D1D | Dark Red #8B0000 |
| red-950 | bg-red-950 | oklch(25.8% 0.092 26.042) | #460809 | #450A0A | Mahogany #4A0100 |
red contrast on white and black
WCAG AA needs 4.5:1 for body text. On white, red shades 600, 700, 800, 900, 950 pass; on black, red shades 50, 100, 200, 300, 400, 500 pass.
| Shade | Hex | On white | On black |
|---|---|---|---|
| red-50 | #FEF2F2 | 1.09:1 Fail | 19.19:1 AA |
| red-100 | #FFE2E2 | 1.21:1 Fail | 17.22:1 AA |
| red-200 | #FFC9C9 | 1.45:1 Fail | 14.45:1 AA |
| red-300 | #FFA2A2 | 1.91:1 Fail | 10.94:1 AA |
| red-400 | #FF6467 | 2.88:1 Fail | 7.27:1 AA |
| red-500 | #FB2C36 | 3.80:1 AA large | 5.51:1 AA |
| red-600 | #E7000B | 4.76:1 AA | 4.40:1 AA large |
| red-700 | #C10007 | 6.42:1 AA | 3.27:1 AA large |
| red-800 | #9F0712 | 8.35:1 AA | 2.51:1 Fail |
| red-900 | #82181A | 10.02:1 AA | 2.09:1 Fail |
| red-950 | #460809 | 16.16:1 AA | 1.29:1 Fail |
Use red in your project
Utility class: bg-red-500. CSS variable: var(--color-red-500). Override the ramp in @theme:
@import "tailwindcss";
@theme {
--color-red-50: oklch(97.1% 0.013 17.38);
--color-red-100: oklch(93.6% 0.032 17.717);
--color-red-200: oklch(88.5% 0.062 18.334);
--color-red-300: oklch(80.8% 0.114 19.571);
--color-red-400: oklch(70.4% 0.191 22.216);
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-red-700: oklch(50.5% 0.213 27.518);
--color-red-800: oklch(44.4% 0.177 26.899);
--color-red-900: oklch(39.6% 0.141 25.723);
--color-red-950: oklch(25.8% 0.092 26.042);
}
More Tailwind colors
Previous: stone | Next: orange
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Build your own scale like this
Start from #FB2C36 and get a custom OKLCH 50 to 950 scale with Tailwind v4 and v3 exports.