Charcoal
#2B0949
PurpleColor Codes
All color formats for development
HEX
#2B0949RGB
rgb(43, 9, 73)HSL
hsl(272, 78%, 16%)OKLCH
oklch(0.242 0.109 302.8)CMYK
cmyk(41%, 88%, 0%, 71%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#270841
2#22073A
3#1E0633
4#1A052C
5#150424
6#11041D
7#0D0316
8#09020F
9#040107
Tints
Lighter variations
1#410E6F
2#581295
3#6F17BB
4#851CE1
5#9940E7
6#AE66EC
7#C28DF1
8#D6B3F6
9#EBD9FA
Tones
Muted variations
1#2B0C45
2#2A0F42
3#2A133F
4#2A163C
5#2A1939
6#2A1C36
7#291F32
8#29222F
9#29262C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F8F1 #F8F1FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EEDF #EEDFFB | Light backgroundsTable row hoverSkeleton loading |
| 200 | E0C4 #E0C4F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | C797 #C797F2 | BordersInactive statesPlaceholder text |
| 400 | AA60 #AA60EB | Disabled statesSecondary iconsMuted text |
| 500 | 9233 #9233E6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 7619 #7619C8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 5E14 #5E149F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 430E #430E71 | Text on light backgroundsHeadingsStrong borders |
| 900 | 2B09 #2B0949 | Primary textHigh emphasis contentDark headings |
| 950 | 1B06 #1B062D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F8F1FD;
--charcoal-100: #EEDFFB;
--charcoal-200: #E0C4F8;
--charcoal-300: #C797F2;
--charcoal-400: #AA60EB;
--charcoal-500: #9233E6;
--charcoal-600: #7619C8;
--charcoal-700: #5E149F;
--charcoal-800: #430E71;
--charcoal-900: #2B0949;
--charcoal-950: #1B062D;
}