Plum
#B78BFD
PurpleColor Codes
All color formats for development
HEX
#B78BFDRGB
rgb(183, 139, 253)HSL
hsl(263, 97%, 77%)OKLCH
oklch(0.725 0.165 300.1)CMYK
cmyk(28%, 45%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9F65FD
2#873EFC
3#6F17FB
4#5B04E8
5#4C03C1
6#3D029B
7#2E0274
8#1E014D
9#0F0127
Tints
Lighter variations
1#BE97FD
2#C5A3FE
3#CDAEFE
4#D4BAFE
5#DBC5FE
6#E2D1FE
7#E9DCFE
8#F1E8FF
9#F8F3FF
Tones
Muted variations
1#B891F8
2#BA97F2
3#BB9DEC
4#BCA2E6
5#BEA8E1
6#BFAEDB
7#C0B3D5
8#C2B9D0
9#C3BFCA
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F6F0 #F6F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E9DC #E9DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | D6BE #D6BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | B78B #B78BFD | BordersInactive statesPlaceholder text |
| 400 | 924F #924FFC | Disabled statesSecondary iconsMuted text |
| 500 | 721D #721DFC | Primary brand colorCTAsActive elementsLinks |
| 600 | 5703 #5703DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4503 #4503B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3102 #31027E | Text on light backgroundsHeadingsStrong borders |
| 900 | 2001 #200150 | Primary textHigh emphasis contentDark headings |
| 950 | 1401 #140132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--plum-50: #F6F0FF;
--plum-100: #E9DCFE;
--plum-200: #D6BEFE;
--plum-300: #B78BFD;
--plum-400: #924FFC;
--plum-500: #721DFC;
--plum-600: #5703DD;
--plum-700: #4503B0;
--plum-800: #31027E;
--plum-900: #200150;
--plum-950: #140132;
}