Charcoal
#163569
BlueColor Codes
All color formats for development
HEX
#163569RGB
rgb(22, 53, 105)HSL
hsl(218, 65%, 25%)OKLCH
oklch(0.337 0.098 260.1)CMYK
cmyk(79%, 50%, 0%, 59%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#142F5F
2#122A54
3#10254A
4#0D203F
5#0B1A35
6#09152A
7#071020
8#040B15
9#02050B
Tints
Lighter variations
1#1D4589
2#2454A8
3#2A64C8
4#4278D7
5#618FDE
6#81A5E4
7#A0BCEB
8#C0D2F2
9#DFE9F8
Tones
Muted variations
1#1A3665
2#1F3761
3#23385D
4#273959
5#2B3A54
6#2F3B50
7#333C4C
8#373E48
9#3C3F44
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F6 #F2F6FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2EA #E2EAF9 | Light backgroundsTable row hoverSkeleton loading |
| 200 | C8D8 #C8D8F3 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9EBA #9EBAEA | BordersInactive statesPlaceholder text |
| 400 | 6C96 #6C96E0 | Disabled statesSecondary iconsMuted text |
| 500 | 4278 #4278D7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 275D #275DB9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1F4A #1F4A93 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1635 #163569 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0E22 #0E2243 | Primary textHigh emphasis contentDark headings |
| 950 | 0915 #09152A | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F2F6FC;
--charcoal-100: #E2EAF9;
--charcoal-200: #C8D8F3;
--charcoal-300: #9EBAEA;
--charcoal-400: #6C96E0;
--charcoal-500: #4278D7;
--charcoal-600: #275DB9;
--charcoal-700: #1F4A93;
--charcoal-800: #163569;
--charcoal-900: #0E2243;
--charcoal-950: #09152A;
}