Rose
#DD0382
PinkColor Codes
All color formats for development
HEX
#DD0382RGB
rgb(221, 3, 130)HSL
hsl(325, 97%, 44%)OKLCH
oklch(0.586 0.239 355.5)CMYK
cmyk(0%, 99%, 41%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C70375
2#B10368
3#9B025B
4#85024E
5#6F0241
6#580134
7#420127
8#2C011A
9#16000D
Tints
Lighter variations
1#F90493
2#FC1E9F
3#FC3AAB
4#FC56B7
5#FD72C3
6#FD8ECF
7#FEABDB
8#FEC7E7
9#FFE3F3
Tones
Muted variations
1#D20E81
2#C7197F
3#BC247D
4#B22F7B
5#A73A79
6#9C4577
7#915076
8#865A74
9#7B6572
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0F9 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDC #FEDCF0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEBE #FEBEE3 | Secondary backgroundsInput backgroundsDividers |
| 300 | FD8B #FD8BCE | BordersInactive statesPlaceholder text |
| 400 | FC4F #FC4FB4 | Disabled statesSecondary iconsMuted text |
| 500 | FC1D #FC1D9F | Primary brand colorCTAsActive elementsLinks |
| 600 | DD03 #DD0382 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B003 #B00368 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E02 #7E024A | Text on light backgroundsHeadingsStrong borders |
| 900 | 5001 #50012F | Primary textHigh emphasis contentDark headings |
| 950 | 3201 #32011E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--rose-50: #FFF0F9;
--rose-100: #FEDCF0;
--rose-200: #FEBEE3;
--rose-300: #FD8BCE;
--rose-400: #FC4FB4;
--rose-500: #FC1D9F;
--rose-600: #DD0382;
--rose-700: #B00368;
--rose-800: #7E024A;
--rose-900: #50012F;
--rose-950: #32011E;
}