← Back to All Colors
Tailwind Rose Color Palette
Elegant pink variant, ideal for romantic themes and soft, welcoming UIs.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
rose-50
#fff1f2
100
rose-100
#ffe4e6
200
rose-200
#fecdd3
300
rose-300
#fda4af
400
rose-400
#fb7185
500
rose-500
#f43f5e
600
rose-600
#e11d48
700
rose-700
#be123c
800
rose-800
#9f1239
900
rose-900
#881337
950
rose-950
#4c0519
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| rose-50 | #fff1f2 | rgb(255, 241, 242) | hsl(356, 100%, 97%) | oklch(0.969 0.015 12.422) | |
| rose-100 | #ffe4e6 | rgb(255, 228, 230) | hsl(356, 100%, 95%) | oklch(0.941 0.03 12.58) | |
| rose-200 | #fecdd3 | rgb(254, 205, 211) | hsl(353, 96%, 90%) | oklch(0.892 0.058 10.001) | |
| rose-300 | #fda4af | rgb(253, 164, 175) | hsl(353, 96%, 82%) | oklch(0.81 0.117 11.638) | |
| rose-400 | #fb7185 | rgb(251, 113, 133) | hsl(351, 95%, 71%) | oklch(0.712 0.194 13.428) | |
| rose-500 | #f43f5e | rgb(244, 63, 94) | hsl(350, 89%, 60%) | oklch(0.645 0.246 16.439) | |
| rose-600 | #e11d48 | rgb(225, 29, 72) | hsl(347, 77%, 50%) | oklch(0.586 0.253 17.585) | |
| rose-700 | #be123c | rgb(190, 18, 60) | hsl(345, 83%, 41%) | oklch(0.514 0.222 16.935) | |
| rose-800 | #9f1239 | rgb(159, 18, 57) | hsl(343, 80%, 35%) | oklch(0.455 0.188 13.697) | |
| rose-900 | #881337 | rgb(136, 19, 55) | hsl(342, 75%, 30%) | oklch(0.41 0.159 10.272) | |
| rose-950 | #4c0519 | rgb(76, 5, 25) | hsl(343, 88%, 16%) | oklch(0.271 0.105 12.094) |
Usage Examples
Background
bg-rose-500Text
text-rose-500Sample Text
Border
border-rose-300Ring
ring-rose-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