Charcoal
#05264C
BlueColor Codes
All color formats for development
HEX
#05264CRGB
rgb(5, 38, 76)HSL
hsl(212, 88%, 16%)OKLCH
oklch(0.27 0.08 254.9)CMYK
cmyk(93%, 50%, 0%, 70%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#042345
2#041F3D
3#031B36
4#03172E
5#021326
6#020F1F
7#010C17
8#01080F
9#000408
Tints
Lighter variations
1#073B75
2#0A4F9D
3#0D63C6
4#0F77EE
5#368EF2
6#5EA4F5
7#86BBF7
8#AED2FA
9#D7E8FC
Tones
Muted variations
1#082749
2#0C2746
3#102742
4#13273E
5#17283B
6#1A2837
7#1E2834
8#222830
9#25292C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F7 #F1F7FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDEC #DDECFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C1DC #C1DCFB | Secondary backgroundsInput backgroundsDividers |
| 300 | 91C1 #91C1F8 | BordersInactive statesPlaceholder text |
| 400 | 57A1 #57A1F4 | Disabled statesSecondary iconsMuted text |
| 500 | 2786 #2786F1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0D6A #0D6AD3 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0B54 #0B54A8 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 083C #083C78 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0526 #05264D | Primary textHigh emphasis contentDark headings |
| 950 | 0318 #031830 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F1F7FE;
--charcoal-100: #DDECFD;
--charcoal-200: #C1DCFB;
--charcoal-300: #91C1F8;
--charcoal-400: #57A1F4;
--charcoal-500: #2786F1;
--charcoal-600: #0D6AD3;
--charcoal-700: #0B54A8;
--charcoal-800: #083C78;
--charcoal-900: #05264D;
--charcoal-950: #031830;
}