Charcoal
#205560
CyanColor Codes
All color formats for development
HEX
#205560RGB
rgb(32, 85, 96)HSL
hsl(190, 50%, 25%)OKLCH
oklch(0.419 0.058 213.6)CMYK
cmyk(67%, 11%, 0%, 62%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1D4C56
2#19444D
3#163B43
4#133339
5#102A30
6#0D2226
7#0A191D
8#061113
9#03080A
Tints
Lighter variations
1#296E7C
2#338899
3#3DA1B6
4#53B3C6
5#70BFCF
6#8CCCD9
7#A9D9E2
8#C6E6EC
9#E2F2F5
Tones
Muted variations
1#23535C
2#265159
3#294F56
4#2D4C53
5#304A50
6#33484D
7#364649
8#394446
9#3D4243
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4FA #F4FAFB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4F3 #E4F3F6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CDE9 #CDE9EE | Secondary backgroundsInput backgroundsDividers |
| 300 | A7D8 #A7D8E2 | BordersInactive statesPlaceholder text |
| 400 | 79C4 #79C4D2 | Disabled statesSecondary iconsMuted text |
| 500 | 53B3 #53B3C6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 3896 #3896A8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2D77 #2D7786 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2055 #205560 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1436 #14363D | Primary textHigh emphasis contentDark headings |
| 950 | 0D22 #0D2226 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F4FAFB;
--charcoal-100: #E4F3F6;
--charcoal-200: #CDE9EE;
--charcoal-300: #A7D8E2;
--charcoal-400: #79C4D2;
--charcoal-500: #53B3C6;
--charcoal-600: #3896A8;
--charcoal-700: #2D7786;
--charcoal-800: #205560;
--charcoal-900: #14363D;
--charcoal-950: #0D2226;
}