Purple
#9712A1
PinkColor Codes
All color formats for development
HEX
#9712A1RGB
rgb(151, 18, 161)HSL
hsl(296, 80%, 35%)OKLCH
oklch(0.487 0.217 324.8)CMYK
cmyk(6%, 89%, 0%, 37%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#881091
2#790E81
3#6A0C70
4#5B0B60
5#4C0950
6#3C0740
7#2D0530
8#1E0420
9#0F0210
Tints
Lighter variations
1#B315BE
2#CF18DC
3#DB2EE8
4#E14CEB
5#E66AEE
6#EB88F2
7#F0A5F5
8#F5C3F8
9#FAE1FC
Tones
Muted variations
1#91199A
2#8B2092
3#85278B
4#7E2E84
5#78367D
6#723D76
7#6C446F
8#664B68
9#5F5260
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 | F5C3 #F5C3F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | ED95 #ED95F3 | BordersInactive statesPlaceholder text |
| 400 | E45E #E45EED | Disabled statesSecondary iconsMuted text |
| 500 | DC30 #DC30E8 | Primary brand colorCTAsActive elementsLinks |
| 600 | BE16 #BE16CA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9712 #9712A1 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6C0D #6C0D73 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4508 #450849 | Primary textHigh emphasis contentDark headings |
| 950 | 2B05 #2B052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FDF1FD;
--purple-100: #FADFFB;
--purple-200: #F5C3F8;
--purple-300: #ED95F3;
--purple-400: #E45EED;
--purple-500: #DC30E8;
--purple-600: #BE16CA;
--purple-700: #9712A1;
--purple-800: #6C0D73;
--purple-900: #450849;
--purple-950: #2B052E;
}