Purple
#880BA8
PinkColor Codes
All color formats for development
HEX
#880BA8RGB
rgb(136, 11, 168)HSL
hsl(288, 88%, 35%)OKLCH
oklch(0.466 0.221 317.1)CMYK
cmyk(19%, 93%, 0%, 34%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#7B0A97
2#6D0986
3#5F0775
4#520665
5#440554
6#370443
7#290332
8#1B0222
9#0E0111
Tints
Lighter variations
1#A20DC7
2#BB0FE6
3#C825F1
4#D044F3
5#D863F5
6#E082F7
7#E8A2F9
8#EFC1FB
9#F7E0FD
Tones
Muted variations
1#8413A0
2#7F1A98
3#7A2290
4#762A88
5#713281
6#6C3A79
7#674271
8#634A69
9#5E5161
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FBF1 #FBF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F7DD #F7DDFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | EFC1 #EFC1FB | Secondary backgroundsInput backgroundsDividers |
| 300 | E391 #E391F8 | BordersInactive statesPlaceholder text |
| 400 | D557 #D557F4 | Disabled statesSecondary iconsMuted text |
| 500 | C927 #C927F1 | Primary brand colorCTAsActive elementsLinks |
| 600 | AB0D #AB0DD3 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 880B #880BA8 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6108 #610878 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3E05 #3E054D | Primary textHigh emphasis contentDark headings |
| 950 | 2703 #270330 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FBF1FE;
--purple-100: #F7DDFD;
--purple-200: #EFC1FB;
--purple-300: #E391F8;
--purple-400: #D557F4;
--purple-500: #C927F1;
--purple-600: #AB0DD3;
--purple-700: #880BA8;
--purple-800: #610878;
--purple-900: #3E054D;
--purple-950: #270330;
}