Charcoal
#2D4086
BlueColor Codes
All color formats for development
HEX
#2D4086RGB
rgb(45, 64, 134)HSL
hsl(227, 50%, 35%)OKLCH
oklch(0.396 0.119 269)CMYK
cmyk(66%, 52%, 0%, 47%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#283A78
2#24336B
3#1F2D5E
4#1B2650
5#162043
6#121A36
7#0D1328
8#090D1B
9#04060D
Tints
Lighter variations
1#354C9F
2#3D58B8
3#516AC5
4#6A7FCD
5#8395D6
6#9CAADE
7#B4BFE6
8#CDD4EE
9#E6EAF7
Tones
Muted variations
1#314281
2#36457D
3#3A4878
4#3E4A74
5#434D70
6#474F6B
7#4C5267
8#505462
9#55575E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F5 #F4F5FB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4E8 #E4E8F6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CDD4 #CDD4EE | Secondary backgroundsInput backgroundsDividers |
| 300 | A7B4 #A7B4E2 | BordersInactive statesPlaceholder text |
| 400 | 798C #798CD2 | Disabled statesSecondary iconsMuted text |
| 500 | 536C #536CC6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 3850 #3850A8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2D40 #2D4086 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 202E #202E60 | Text on light backgroundsHeadingsStrong borders |
| 900 | 141D #141D3D | Primary textHigh emphasis contentDark headings |
| 950 | 0D12 #0D1226 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F4F5FB;
--charcoal-100: #E4E8F6;
--charcoal-200: #CDD4EE;
--charcoal-300: #A7B4E2;
--charcoal-400: #798CD2;
--charcoal-500: #536CC6;
--charcoal-600: #3850A8;
--charcoal-700: #2D4086;
--charcoal-800: #202E60;
--charcoal-900: #141D3D;
--charcoal-950: #0D1226;
}