Charcoal
#2E5C84
BlueColor Codes
All color formats for development
HEX
#2E5C84RGB
rgb(46, 92, 132)HSL
hsl(208, 48%, 35%)OKLCH
oklch(0.461 0.083 247)CMYK
cmyk(65%, 30%, 0%, 48%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2A5377
2#254A6A
3#20405C
4#1C374F
5#172E42
6#132535
7#0E1C28
8#09121A
9#05090D
Tints
Lighter variations
1#376D9D
2#407EB5
3#538FC3
4#6C9FCB
5#84AFD4
6#9DBFDD
7#B5CFE5
8#CEDFEE
9#E6EFF6
Tones
Muted variations
1#335C80
2#375C7C
3#3B5B77
4#405B73
5#445B6F
6#485A6A
7#4C5A66
8#515A62
9#555A5E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F8 #F4F8FB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E5EE #E5EEF6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CEDF #CEDFEE | Secondary backgroundsInput backgroundsDividers |
| 300 | A8C6 #A8C6E1 | BordersInactive statesPlaceholder text |
| 400 | 7BA9 #7BA9D1 | Disabled statesSecondary iconsMuted text |
| 500 | 5590 #5590C3 | Primary brand colorCTAsActive elementsLinks |
| 600 | 3A74 #3A74A6 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2E5C #2E5C84 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2142 #21425E | Text on light backgroundsHeadingsStrong borders |
| 900 | 152A #152A3C | Primary textHigh emphasis contentDark headings |
| 950 | 0D1A #0D1A26 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F4F8FB;
--charcoal-100: #E5EEF6;
--charcoal-200: #CEDFEE;
--charcoal-300: #A8C6E1;
--charcoal-400: #7BA9D1;
--charcoal-500: #5590C3;
--charcoal-600: #3A74A6;
--charcoal-700: #2E5C84;
--charcoal-800: #21425E;
--charcoal-900: #152A3C;
--charcoal-950: #0D1A26;
}