← Back to All Colors
Tailwind Red Color Palette
Bold and energetic, perfect for errors, warnings, and call-to-action buttons.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
red-50
#fef2f2
100
red-100
#fee2e2
200
red-200
#fecaca
300
red-300
#fca5a5
400
red-400
#f87171
500
red-500
#ef4444
600
red-600
#dc2626
700
red-700
#b91c1c
800
red-800
#991b1b
900
red-900
#7f1d1d
950
red-950
#450a0a
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| red-50 | #fef2f2 | rgb(254, 242, 242) | hsl(0, 86%, 97%) | oklch(0.971 0.013 17.38) | |
| red-100 | #fee2e2 | rgb(254, 226, 226) | hsl(0, 93%, 94%) | oklch(0.936 0.032 17.717) | |
| red-200 | #fecaca | rgb(254, 202, 202) | hsl(0, 96%, 89%) | oklch(0.885 0.062 18.334) | |
| red-300 | #fca5a5 | rgb(252, 165, 165) | hsl(0, 94%, 82%) | oklch(0.808 0.114 19.571) | |
| red-400 | #f87171 | rgb(248, 113, 113) | hsl(0, 91%, 71%) | oklch(0.704 0.191 22.216) | |
| red-500 | #ef4444 | rgb(239, 68, 68) | hsl(0, 84%, 60%) | oklch(0.637 0.237 25.331) | |
| red-600 | #dc2626 | rgb(220, 38, 38) | hsl(0, 72%, 51%) | oklch(0.577 0.245 27.325) | |
| red-700 | #b91c1c | rgb(185, 28, 28) | hsl(0, 74%, 42%) | oklch(0.505 0.213 27.518) | |
| red-800 | #991b1b | rgb(153, 27, 27) | hsl(0, 70%, 35%) | oklch(0.444 0.177 26.899) | |
| red-900 | #7f1d1d | rgb(127, 29, 29) | hsl(0, 63%, 31%) | oklch(0.396 0.141 25.723) | |
| red-950 | #450a0a | rgb(69, 10, 10) | hsl(0, 75%, 15%) | oklch(0.258 0.092 26.042) |
Usage Examples
Background
bg-red-500Text
text-red-500Sample Text
Border
border-red-300Ring
ring-red-500Explore Other Colors
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Aa
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Aa
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow