Purple
#9F03B0
PinkColor Codes
All color formats for development
HEX
#9F03B0RGB
rgb(159, 3, 176)HSL
hsl(294, 97%, 35%)OKLCH
oklch(0.505 0.237 323)CMYK
cmyk(10%, 98%, 0%, 31%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#8F029E
2#7F028D
3#6F027B
4#5F0269
5#4F0158
6#3F0146
7#300135
8#200123
9#100012
Tints
Lighter variations
1#BC03D0
2#D904F1
3#E51AFC
4#E93BFC
5#EC5CFD
6#F07CFD
7#F49DFE
8#F8BEFE
9#FBDEFF
Tones
Muted variations
1#980BA7
2#91149F
3#8A1D96
4#83258D
5#7C2E85
6#75377C
7#6E3F73
8#67486B
9#605162
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF0 #FDF0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBDC #FBDCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | F8BE #F8BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | F28B #F28BFD | BordersInactive statesPlaceholder text |
| 400 | EB4F #EB4FFC | Disabled statesSecondary iconsMuted text |
| 500 | E51D #E51DFC | Primary brand colorCTAsActive elementsLinks |
| 600 | C703 #C703DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9F03 #9F03B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7102 #71027E | Text on light backgroundsHeadingsStrong borders |
| 900 | 4801 #480150 | Primary textHigh emphasis contentDark headings |
| 950 | 2D01 #2D0132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FDF0FF;
--purple-100: #FBDCFE;
--purple-200: #F8BEFE;
--purple-300: #F28BFD;
--purple-400: #EB4FFC;
--purple-500: #E51DFC;
--purple-600: #C703DD;
--purple-700: #9F03B0;
--purple-800: #71027E;
--purple-900: #480150;
--purple-950: #2D0132;
}