Plum
#B68DFB
PurpleColor Codes
All color formats for development
HEX
#B68DFBRGB
rgb(182, 141, 251)HSL
hsl(262, 93%, 77%)OKLCH
oklch(0.726 0.159 299.6)CMYK
cmyk(27%, 44%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9D68FA
2#8542F8
3#6C1CF7
4#5908E3
5#4A07BD
6#3B0598
7#2C0472
8#1E034C
9#0F0126
Tints
Lighter variations
1#BD99FB
2#C4A4FC
3#CCB0FC
4#D3BBFD
5#DAC6FD
6#E2D2FD
7#E9DDFE
8#F0E8FE
9#F8F4FF
Tones
Muted variations
1#B793F5
2#B999F0
3#BA9EEB
4#BCA4E5
5#BDA9E0
6#BFAFDA
7#C0B4D5
8#C1B9CF
9#C3BFCA
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F5F0 #F5F0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E9DD #E9DDFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | D6BF #D6BFFD | Secondary backgroundsInput backgroundsDividers |
| 300 | B68E #B68EFB | BordersInactive statesPlaceholder text |
| 400 | 9053 #9053F9 | Disabled statesSecondary iconsMuted text |
| 500 | 7022 #7022F7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 5408 #5408D9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4306 #4306AC | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3004 #30047B | Text on light backgroundsHeadingsStrong borders |
| 900 | 1F03 #1F034F | Primary textHigh emphasis contentDark headings |
| 950 | 1302 #130231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--plum-50: #F5F0FE;
--plum-100: #E9DDFE;
--plum-200: #D6BFFD;
--plum-300: #B68EFB;
--plum-400: #9053F9;
--plum-500: #7022F7;
--plum-600: #5408D9;
--plum-700: #4306AC;
--plum-800: #30047B;
--plum-900: #1F034F;
--plum-950: #130231;
}