Purple
#780854
PinkColor Codes
All color formats for development
HEX
#780854RGB
rgb(120, 8, 84)HSL
hsl(319, 88%, 25%)OKLCH
oklch(0.384 0.156 346.4)CMYK
cmyk(0%, 93%, 30%, 53%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#6C074C
2#600643
3#54053B
4#480533
5#3C042A
6#300322
7#240219
8#180211
9#0C0108
Tints
Lighter variations
1#9C0A6E
2#C00C87
3#E40FA0
4#F127B1
5#F44BBE
6#F66FCB
7#F893D8
8#FAB7E5
9#FDDBF2
Tones
Muted variations
1#720D52
2#6D1350
3#67184E
4#611E4C
5#5C244A
6#562948
7#512F46
8#4B3544
9#453A42
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF1 #FEF1FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDDD #FDDDF3 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBC1 #FBC1E9 | Secondary backgroundsInput backgroundsDividers |
| 300 | F891 #F891D7 | BordersInactive statesPlaceholder text |
| 400 | F457 #F457C3 | Disabled statesSecondary iconsMuted text |
| 500 | F127 #F127B1 | Primary brand colorCTAsActive elementsLinks |
| 600 | D30D #D30D94 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A80B #A80B76 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7808 #780854 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4D05 #4D0536 | Primary textHigh emphasis contentDark headings |
| 950 | 3003 #300322 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FEF1FA;
--purple-100: #FDDDF3;
--purple-200: #FBC1E9;
--purple-300: #F891D7;
--purple-400: #F457C3;
--purple-500: #F127B1;
--purple-600: #D30D94;
--purple-700: #A80B76;
--purple-800: #780854;
--purple-900: #4D0536;
--purple-950: #300322;
}