Charcoal
#101041
BlueColor Codes
All color formats for development
HEX
#101041RGB
rgb(16, 16, 65)HSL
hsl(240, 60%, 16%)OKLCH
oklch(0.213 0.09 275.6)CMYK
cmyk(75%, 75%, 0%, 75%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0F0F3B
2#0D0D34
3#0B0B2E
4#0A0A27
5#080821
6#07071A
7#050514
8#03030D
9#020207
Tints
Lighter variations
1#191964
2#212186
3#2A2AA8
4#3333CA
5#5454D4
6#7676DD
7#9898E5
8#BABAEE
9#DDDDF6
Tones
Muted variations
1#13133F
2#15153C
3#18183A
4#1A1A37
5#1D1D35
6#1F1F33
7#212130
8#24242E
9#26262B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F3 #F3F3FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2E2 #E2E2F8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CACA #CACAF2 | Secondary backgroundsInput backgroundsDividers |
| 300 | A1A1 #A1A1E8 | BordersInactive statesPlaceholder text |
| 400 | 7070 #7070DB | Disabled statesSecondary iconsMuted text |
| 500 | 4747 #4747D1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 2D2D #2D2DB4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2424 #24248F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1A1A #1A1A66 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1010 #101041 | Primary textHigh emphasis contentDark headings |
| 950 | 0A0A #0A0A29 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F3F3FC;
--charcoal-100: #E2E2F8;
--charcoal-200: #CACAF2;
--charcoal-300: #A1A1E8;
--charcoal-400: #7070DB;
--charcoal-500: #4747D1;
--charcoal-600: #2D2DB4;
--charcoal-700: #24248F;
--charcoal-800: #1A1A66;
--charcoal-900: #101041;
--charcoal-950: #0A0A29;
}