Purple
#7C14CC
PurpleColor Codes
All color formats for development
HEX
#7C14CCRGB
rgb(124, 20, 204)HSL
hsl(274, 82%, 44%)OKLCH
oklch(0.483 0.243 302.4)CMYK
cmyk(39%, 90%, 0%, 20%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#7012B8
2#6410A3
3#570E8F
4#4B0C7B
5#3E0A66
6#320852
7#25063D
8#190429
9#0C0214
Tints
Lighter variations
1#8C17E6
2#992FEA
3#A649ED
4#B363F0
5#BF7DF2
6#CC97F5
7#D9B1F7
8#E6CBFA
9#F2E5FC
Tones
Muted variations
1#7B1DC3
2#7A27BA
3#7930B1
4#7839A7
5#76429E
6#754B95
7#74558C
8#735E83
9#716779
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F8F1 #F8F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EFDF #EFDFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | E1C3 #E1C3F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | CB94 #CB94F4 | BordersInactive statesPlaceholder text |
| 400 | B05D #B05DEF | Disabled statesSecondary iconsMuted text |
| 500 | 992E #992EEA | Primary brand colorCTAsActive elementsLinks |
| 600 | 7C14 #7C14CC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 6310 #6310A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 470B #470B74 | Text on light backgroundsHeadingsStrong borders |
| 900 | 2D07 #2D074A | Primary textHigh emphasis contentDark headings |
| 950 | 1C05 #1C052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #F8F1FE;
--purple-100: #EFDFFC;
--purple-200: #E1C3F9;
--purple-300: #CB94F4;
--purple-400: #B05DEF;
--purple-500: #992EEA;
--purple-600: #7C14CC;
--purple-700: #6310A2;
--purple-800: #470B74;
--purple-900: #2D074A;
--purple-950: #1C052E;
}