Deep Pink
#BF19C8
PinkColor Codes
All color formats for development
HEX
#BF19C8RGB
rgb(191, 25, 200)HSL
hsl(297, 78%, 44%)OKLCH
oklch(0.577 0.257 325.7)CMYK
cmyk(4%, 88%, 0%, 22%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#AC16B4
2#9914A0
3#86118C
4#730F78
5#5F0C64
6#4C0A50
7#39073C
8#260528
9#130214
Tints
Lighter variations
1#D71CE1
2#DD34E6
3#E14DE9
4#E566EC
5#EA80EF
6#EE99F2
7#F2B3F6
8#F6CCF9
9#FBE6FC
Tones
Muted variations
1#B721BF
2#AF2AB6
3#A733AD
4#9F3CA5
5#98449C
6#904D93
7#88568A
8#805F82
9#786779
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF1 #FDF1FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FADF #FADFFB | Light backgroundsTable row hoverSkeleton loading |
| 200 | F5C4 #F5C4F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | EE97 #EE97F2 | BordersInactive statesPlaceholder text |
| 400 | E460 #E460EB | Disabled statesSecondary iconsMuted text |
| 500 | DD33 #DD33E6 | Primary brand colorCTAsActive elementsLinks |
| 600 | BF19 #BF19C8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9814 #98149F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6D0E #6D0E71 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4509 #450949 | Primary textHigh emphasis contentDark headings |
| 950 | 2B06 #2B062D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--deep-pink-50: #FDF1FD;
--deep-pink-100: #FADFFB;
--deep-pink-200: #F5C4F8;
--deep-pink-300: #EE97F2;
--deep-pink-400: #E460EB;
--deep-pink-500: #DD33E6;
--deep-pink-600: #BF19C8;
--deep-pink-700: #98149F;
--deep-pink-800: #6D0E71;
--deep-pink-900: #450949;
--deep-pink-950: #2B062D;
}