Plum
#C7BDFF
BlueColor Codes
All color formats for development
HEX
#C7BDFFRGB
rgb(199, 189, 255)HSL
hsl(249, 100%, 87%)OKLCH
oklch(0.829 0.092 291.2)CMYK
cmyk(22%, 26%, 0%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A190FF
2#7B64FF
3#5638FF
4#300BFF
5#2100DE
6#1B00B1
7#140085
8#0D0059
9#07002C
Tints
Lighter variations
1#CCC3FF
2#D2CAFF
3#D8D1FF
4#DDD7FF
5#E3DEFF
6#E8E4FF
7#EEEBFF
8#F4F2FF
9#F9F8FF
Tones
Muted variations
1#C9C0FC
2#CBC3F8
3#CEC7F5
4#D0CAF2
5#D2CDEE
6#D5D1EB
7#D7D4E8
8#D9D7E4
9#DCDBE1
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F0 #F2F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1DB #E1DBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | C7BD #C7BDFF | Secondary backgroundsInput backgroundsDividers |
| 300 | 9B8A #9B8AFF | BordersInactive statesPlaceholder text |
| 400 | 674D #674DFF | Disabled statesSecondary iconsMuted text |
| 500 | 3C1A #3C1AFF | Primary brand colorCTAsActive elementsLinks |
| 600 | 2200 #2200E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1B00 #1B00B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1300 #130080 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0C00 #0C0052 | Primary textHigh emphasis contentDark headings |
| 950 | 0800 #080033 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--plum-50: #F2F0FF;
--plum-100: #E1DBFF;
--plum-200: #C7BDFF;
--plum-300: #9B8AFF;
--plum-400: #674DFF;
--plum-500: #3C1AFF;
--plum-600: #2200E0;
--plum-700: #1B00B3;
--plum-800: #130080;
--plum-900: #0C0052;
--plum-950: #080033;
}