Plum
#DB94F4
PurpleColor Codes
All color formats for development
HEX
#DB94F4RGB
rgb(219, 148, 244)HSL
hsl(284, 81%, 77%)OKLCH
oklch(0.771 0.152 316.9)CMYK
cmyk(10%, 39%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#CE71F0
2#C24EEC
3#B62AE9
4#A216D5
5#8713B2
6#6C0F8E
7#510B6B
8#360747
9#1B0424
Tints
Lighter variations
1#DE9FF5
2#E2AAF6
3#E5B5F7
4#E9BFF8
5#EDCAF9
6#F0D5FB
7#F4DFFC
8#F8EAFD
9#FBF4FE
Tones
Muted variations
1#D89AEF
2#D69EEA
3#D4A3E6
4#D2A8E1
5#CFADDC
6#CDB1D7
7#CBB6D3
8#C9BBCE
9#C7C0C9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FAF1 #FAF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F4DF #F4DFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | EAC3 #EAC3F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | DB95 #DB95F4 | BordersInactive statesPlaceholder text |
| 400 | C75D #C75DEE | Disabled statesSecondary iconsMuted text |
| 500 | B82F #B82FE9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 9B15 #9B15CB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 7B11 #7B11A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 580C #580C73 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3808 #38084A | Primary textHigh emphasis contentDark headings |
| 950 | 2305 #23052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--plum-50: #FAF1FE;
--plum-100: #F4DFFC;
--plum-200: #EAC3F9;
--plum-300: #DB95F4;
--plum-400: #C75DEE;
--plum-500: #B82FE9;
--plum-600: #9B15CB;
--plum-700: #7B11A2;
--plum-800: #580C73;
--plum-900: #38084A;
--plum-950: #23052E;
}