Charcoal
#205060
BlueColor Codes
All color formats for development
HEX
#205060RGB
rgb(32, 80, 96)HSL
hsl(195, 50%, 25%)OKLCH
oklch(0.406 0.058 223)CMYK
cmyk(67%, 17%, 0%, 62%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1D4856
2#19404D
3#163843
4#133039
5#102830
6#0D2026
7#0A181D
8#061013
9#03080A
Tints
Lighter variations
1#29687C
2#338099
3#3D97B6
4#53A9C6
5#70B7CF
6#8CC6D9
7#A9D4E2
8#C6E2EC
9#E2F1F5
Tones
Muted variations
1#234E5C
2#264D59
3#294B56
4#2D4953
5#304850
6#33464D
7#364549
8#394346
9#3D4143
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F9 #F4F9FB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4F2 #E4F2F6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CDE6 #CDE6EE | Secondary backgroundsInput backgroundsDividers |
| 300 | A7D3 #A7D3E2 | BordersInactive statesPlaceholder text |
| 400 | 79BC #79BCD2 | Disabled statesSecondary iconsMuted text |
| 500 | 53A9 #53A9C6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 388C #388CA8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2D70 #2D7086 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2050 #205060 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1433 #14333D | Primary textHigh emphasis contentDark headings |
| 950 | 0D20 #0D2026 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F4F9FB;
--charcoal-100: #E4F2F6;
--charcoal-200: #CDE6EE;
--charcoal-300: #A7D3E2;
--charcoal-400: #79BCD2;
--charcoal-500: #53A9C6;
--charcoal-600: #388CA8;
--charcoal-700: #2D7086;
--charcoal-800: #205060;
--charcoal-900: #14333D;
--charcoal-950: #0D2026;
}