Charcoal
#206060
CyanColor Codes
All color formats for development
HEX
#206060RGB
rgb(32, 96, 96)HSL
hsl(180, 50%, 25%)OKLCH
oklch(0.449 0.064 195.1)CMYK
cmyk(67%, 0%, 0%, 62%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1D5656
2#194D4D
3#164343
4#133939
5#103030
6#0D2626
7#0A1D1D
8#061313
9#030A0A
Tints
Lighter variations
1#297C7C
2#339999
3#3DB6B6
4#53C6C6
5#70CFCF
6#8CD9D9
7#A9E2E2
8#C6ECEC
9#E2F5F5
Tones
Muted variations
1#235C5C
2#265959
3#295656
4#2D5353
5#305050
6#334C4D
7#364949
8#394646
9#3D4343
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4FB #F4FBFB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4F6 #E4F6F6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CDEE #CDEEEE | Secondary backgroundsInput backgroundsDividers |
| 300 | A7E2 #A7E2E2 | BordersInactive statesPlaceholder text |
| 400 | 79D2 #79D2D2 | Disabled statesSecondary iconsMuted text |
| 500 | 53C6 #53C6C6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 38A8 #38A8A8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2D86 #2D8686 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2060 #206060 | Text on light backgroundsHeadingsStrong borders |
| 900 | 143D #143D3D | Primary textHigh emphasis contentDark headings |
| 950 | 0D26 #0D2626 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F4FBFB;
--charcoal-100: #E4F6F6;
--charcoal-200: #CDEEEE;
--charcoal-300: #A7E2E2;
--charcoal-400: #79D2D2;
--charcoal-500: #53C6C6;
--charcoal-600: #38A8A8;
--charcoal-700: #2D8686;
--charcoal-800: #206060;
--charcoal-900: #143D3D;
--charcoal-950: #0D2626;
}