Purple
#A40FD2
PinkColor Codes
All color formats for development
HEX
#A40FD2RGB
rgb(164, 15, 210)HSL
hsl(286, 87%, 44%)OKLCH
oklch(0.54 0.26 315.1)CMYK
cmyk(22%, 93%, 0%, 18%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#940DBD
2#830CA8
3#730A93
4#63097E
5#520769
6#420654
7#31043F
8#21032A
9#100115
Tints
Lighter variations
1#B910ED
2#C229F0
3#C944F2
4#D15FF4
5#D979F6
6#E094F8
7#E8AFF9
8#F0CAFB
9#F7E4FD
Tones
Muted variations
1#9F18C8
2#9A22BE
3#952CB5
4#8F36AB
5#8A3FA1
6#854997
7#80538D
8#7B5D84
9#75667A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FBF1 #FBF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F5DE #F5DEFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | EDC1 #EDC1FB | Secondary backgroundsInput backgroundsDividers |
| 300 | E091 #E091F7 | BordersInactive statesPlaceholder text |
| 400 | CF58 #CF58F3 | Disabled statesSecondary iconsMuted text |
| 500 | C128 #C128F0 | Primary brand colorCTAsActive elementsLinks |
| 600 | A40F #A40FD2 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 830C #830CA7 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5D08 #5D0877 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3C05 #3C054C | Primary textHigh emphasis contentDark headings |
| 950 | 2503 #250330 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FBF1FE;
--purple-100: #F5DEFD;
--purple-200: #EDC1FB;
--purple-300: #E091F7;
--purple-400: #CF58F3;
--purple-500: #C128F0;
--purple-600: #A40FD2;
--purple-700: #830CA7;
--purple-800: #5D0877;
--purple-900: #3C054C;
--purple-950: #250330;
}