Purple
#950EA4
PinkColor Codes
All color formats for development
HEX
#950EA4RGB
rgb(149, 14, 164)HSL
hsl(294, 84%, 35%)OKLCH
oklch(0.484 0.221 323.2)CMYK
cmyk(9%, 91%, 0%, 36%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#860D94
2#770B83
3#680A73
4#5A0963
5#4B0752
6#3C0642
7#2D0431
8#1E0321
9#0F0110
Tints
Lighter variations
1#B111C3
2#CD14E1
3#D92AEC
4#DE48EF
5#E467F2
6#E985F4
7#EFA4F7
8#F4C2FA
9#FAE1FC
Tones
Muted variations
1#8F169D
2#891D95
3#83258E
4#7D2C86
5#77347F
6#713B77
7#6B4370
8#654A68
9#5F5261
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FCF1 #FCF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F9DE #F9DEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | F4C2 #F4C2FA | Secondary backgroundsInput backgroundsDividers |
| 300 | EC93 #EC93F6 | BordersInactive statesPlaceholder text |
| 400 | E25B #E25BF1 | Disabled statesSecondary iconsMuted text |
| 500 | D92C #D92CED | Primary brand colorCTAsActive elementsLinks |
| 600 | BC12 #BC12CE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 950E #950EA4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6B0A #6B0A75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4407 #44074B | Primary textHigh emphasis contentDark headings |
| 950 | 2B04 #2B042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FCF1FE;
--purple-100: #F9DEFC;
--purple-200: #F4C2FA;
--purple-300: #EC93F6;
--purple-400: #E25BF1;
--purple-500: #D92CED;
--purple-600: #BC12CE;
--purple-700: #950EA4;
--purple-800: #6B0A75;
--purple-900: #44074B;
--purple-950: #2B042F;
}