Plum
#C28DFC
PurpleColor Codes
All color formats for development
HEX
#C28DFCRGB
rgb(194, 141, 252)HSL
hsl(269, 95%, 77%)OKLCH
oklch(0.738 0.163 304.8)CMYK
cmyk(23%, 44%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#AE66FB
2#9A40FA
3#861AF9
4#7206E6
5#5F05BF
6#4C0499
7#390373
8#26024D
9#130126
Tints
Lighter variations
1#C998FC
2#CFA4FD
3#D5AFFD
4#DBBAFD
5#E1C6FE
6#E7D1FE
7#EDDDFE
8#F3E8FE
9#F9F4FF
Tones
Muted variations
1#C392F6
2#C398F1
3#C39DEB
4#C3A3E6
5#C3A8E0
6#C4AEDB
7#C4B4D5
8#C4B9CF
9#C4BFCA
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F0 #F7F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EDDC #EDDCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | DDBE #DDBEFD | Secondary backgroundsInput backgroundsDividers |
| 300 | C28D #C28DFC | BordersInactive statesPlaceholder text |
| 400 | A351 #A351FB | Disabled statesSecondary iconsMuted text |
| 500 | 891F #891FF9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 6D06 #6D06DB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 5604 #5604AE | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3E03 #3E037C | Text on light backgroundsHeadingsStrong borders |
| 900 | 2802 #280250 | Primary textHigh emphasis contentDark headings |
| 950 | 1901 #190132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--plum-50: #F7F0FF;
--plum-100: #EDDCFE;
--plum-200: #DDBEFD;
--plum-300: #C28DFC;
--plum-400: #A351FB;
--plum-500: #891FF9;
--plum-600: #6D06DB;
--plum-700: #5604AE;
--plum-800: #3E037C;
--plum-900: #280250;
--plum-950: #190132;
}