Purple
#7B0457
PinkColor Codes
All color formats for development
HEX
#7B0457RGB
rgb(123, 4, 87)HSL
hsl(318, 94%, 25%)OKLCH
oklch(0.39 0.162 345.8)CMYK
cmyk(0%, 97%, 29%, 52%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#6F034F
2#630346
3#57033D
4#4A0235
5#3E022C
6#310223
7#25011A
8#190112
9#0C0009
Tints
Lighter variations
1#A10572
2#C6068C
3#EB07A7
4#F820B7
5#F945C3
6#FA6BCF
7#FC90DB
8#FDB5E7
9#FEDAF3
Tones
Muted variations
1#760A55
2#701053
3#6A1651
4#641C4E
5#5E224C
6#582849
7#522E47
8#4C3445
9#463A42
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDC #FEDCF4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDBF #FDBFEA | Secondary backgroundsInput backgroundsDividers |
| 300 | FB8D #FB8DDA | BordersInactive statesPlaceholder text |
| 400 | FA52 #FA52C7 | Disabled statesSecondary iconsMuted text |
| 500 | F820 #F820B7 | Primary brand colorCTAsActive elementsLinks |
| 600 | DA07 #DA079A | Hover statesFocus ringsPrimary buttons hover |
| 700 | AD05 #AD057B | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7C04 #7C0458 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F02 #4F0238 | Primary textHigh emphasis contentDark headings |
| 950 | 3102 #310223 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FFF0FA;
--purple-100: #FEDCF4;
--purple-200: #FDBFEA;
--purple-300: #FB8DDA;
--purple-400: #FA52C7;
--purple-500: #F820B7;
--purple-600: #DA079A;
--purple-700: #AD057B;
--purple-800: #7C0458;
--purple-900: #4F0238;
--purple-950: #310223;
}