Purple
#AA0867
PinkColor Codes
All color formats for development
HEX
#AA0867RGB
rgb(170, 8, 103)HSL
hsl(325, 91%, 35%)OKLCH
oklch(0.486 0.196 353.8)CMYK
cmyk(0%, 95%, 39%, 33%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#99075D
2#880652
3#770648
4#66053E
5#550433
6#440329
7#33021F
8#220215
9#11010A
Tints
Lighter variations
1#CA0A7A
2#EA0B8D
3#F5219D
4#F641AB
5#F861B9
6#F980C7
7#FBA0D5
8#FCC0E3
9#FEDFF1
Tones
Muted variations
1#A21065
2#9A1864
3#922063
4#8A2961
5#823160
6#7A395F
7#72415D
8#69495C
9#61515B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF0 #FEF0F9 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDDD #FDDDF0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FCC0 #FCC0E3 | Secondary backgroundsInput backgroundsDividers |
| 300 | FA8F #FA8FCD | BordersInactive statesPlaceholder text |
| 400 | F755 #F755B3 | Disabled statesSecondary iconsMuted text |
| 500 | F524 #F5249E | Primary brand colorCTAsActive elementsLinks |
| 600 | D60A #D60A81 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AA08 #AA0867 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7A06 #7A0649 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4E04 #4E042F | Primary textHigh emphasis contentDark headings |
| 950 | 3102 #31021D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FEF0F9;
--purple-100: #FDDDF0;
--purple-200: #FCC0E3;
--purple-300: #FA8FCD;
--purple-400: #F755B3;
--purple-500: #F5249E;
--purple-600: #D60A81;
--purple-700: #AA0867;
--purple-800: #7A0649;
--purple-900: #4E042F;
--purple-950: #31021D;
}