Plum
#A992F7
BlueColor Codes
All color formats for development
HEX
#A992F7RGB
rgb(169, 146, 247)HSL
hsl(254, 86%, 77%)OKLCH
oklch(0.722 0.145 292.9)CMYK
cmyk(32%, 41%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#8D6DF4
2#7049F1
3#5424EF
4#4010DB
5#350EB7
6#2B0B92
7#20086E
8#150549
9#0B0325
Tints
Lighter variations
1#B29DF8
2#BBA8F8
3#C3B3F9
4#CCBEFA
5#D4C8FB
6#DDD3FC
7#E5DEFD
8#EEE9FD
9#F6F4FE
Tones
Muted variations
1#AC97F2
2#AF9CED
3#B2A1E8
4#B4A6E3
5#B7ABDE
6#BAB0D9
7#BCB5D3
8#BFBACE
9#C2BFC9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F1 #F4F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E5DE #E5DEFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | CFC1 #CFC1FA | Secondary backgroundsInput backgroundsDividers |
| 300 | A992 #A992F7 | BordersInactive statesPlaceholder text |
| 400 | 7D59 #7D59F3 | Disabled statesSecondary iconsMuted text |
| 500 | 582A #582AEF | Primary brand colorCTAsActive elementsLinks |
| 600 | 3D10 #3D10D1 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 300C #300CA6 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2309 #230977 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1606 #16064C | Primary textHigh emphasis contentDark headings |
| 950 | 0E04 #0E042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--plum-50: #F4F1FE;
--plum-100: #E5DEFD;
--plum-200: #CFC1FA;
--plum-300: #A992F7;
--plum-400: #7D59F3;
--plum-500: #582AEF;
--plum-600: #3D10D1;
--plum-700: #300CA6;
--plum-800: #230977;
--plum-900: #16064C;
--plum-950: #0E042F;
}