Purple
#AC067D
PinkColor Codes
All color formats for development
HEX
#AC067DRGB
rgb(172, 6, 125)HSL
hsl(317, 93%, 35%)OKLCH
oklch(0.498 0.209 345)CMYK
cmyk(0%, 97%, 27%, 33%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9B0671
2#8A0564
3#790458
4#67044B
5#56033F
6#450232
7#340226
8#220119
9#11010D
Tints
Lighter variations
1#CC0794
2#EC09AC
3#F71FBA
4#F83FC4
5#F95FCE
6#FA7FD7
7#FC9FE1
8#FDBFEB
9#FEDFF5
Tones
Muted variations
1#A40F7A
2#9C1776
3#931F72
4#8B276F
5#83306B
6#7A3868
7#724064
8#6A4960
9#62515D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF0 #FEF0FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDD #FEDDF4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDBF #FDBFEB | Secondary backgroundsInput backgroundsDividers |
| 300 | FB8E #FB8EDC | BordersInactive statesPlaceholder text |
| 400 | F953 #F953CA | Disabled statesSecondary iconsMuted text |
| 500 | F722 #F722BA | Primary brand colorCTAsActive elementsLinks |
| 600 | D908 #D9089D | Hover statesFocus ringsPrimary buttons hover |
| 700 | AC06 #AC067D | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7B04 #7B0459 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F03 #4F0339 | Primary textHigh emphasis contentDark headings |
| 950 | 3102 #310224 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FEF0FA;
--purple-100: #FEDDF4;
--purple-200: #FDBFEB;
--purple-300: #FB8EDC;
--purple-400: #F953CA;
--purple-500: #F722BA;
--purple-600: #D9089D;
--purple-700: #AC067D;
--purple-800: #7B0459;
--purple-900: #4F0339;
--purple-950: #310224;
}