Charcoal
#270A47
PurpleColor Codes
All color formats for development
HEX
#270A47RGB
rgb(39, 10, 71)HSL
hsl(269, 75%, 16%)OKLCH
oklch(0.236 0.105 299.7)CMYK
cmyk(45%, 86%, 0%, 72%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#240940
2#200839
3#1C0732
4#18062B
5#140524
6#10041D
7#0C0315
8#08020E
9#040107
Tints
Lighter variations
1#3D106D
2#521592
3#661AB8
4#7B20DD
5#9144E4
6#A769EA
7#BD8FEF
8#D3B4F4
9#E9DAFA
Tones
Muted variations
1#280D44
2#281041
3#28133E
4#28163B
5#281A38
6#281D35
7#282032
8#29232F
9#29262C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F2 #F7F2FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EDE0 #EDE0FB | Light backgroundsTable row hoverSkeleton loading |
| 200 | DDC5 #DDC5F7 | Secondary backgroundsInput backgroundsDividers |
| 300 | C398 #C398F0 | BordersInactive statesPlaceholder text |
| 400 | A463 #A463E9 | Disabled statesSecondary iconsMuted text |
| 500 | 8936 #8936E2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 6D1C #6D1CC4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 5716 #57169C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3E10 #3E1070 | Text on light backgroundsHeadingsStrong borders |
| 900 | 280A #280A47 | Primary textHigh emphasis contentDark headings |
| 950 | 1906 #19062D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F7F2FD;
--charcoal-100: #EDE0FB;
--charcoal-200: #DDC5F7;
--charcoal-300: #C398F0;
--charcoal-400: #A463E9;
--charcoal-500: #8936E2;
--charcoal-600: #6D1CC4;
--charcoal-700: #57169C;
--charcoal-800: #3E1070;
--charcoal-900: #280A47;
--charcoal-950: #19062D;
}