Charcoal
#024750
CyanColor Codes
All color formats for development
HEX
#024750RGB
rgb(2, 71, 80)HSL
hsl(187, 95%, 16%)OKLCH
oklch(0.365 0.062 209.3)CMYK
cmyk(98%, 11%, 0%, 69%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#023F48
2#023840
3#013138
4#012A30
5#012328
6#011C20
7#011518
8#000E10
9#000708
Tints
Lighter variations
1#036C79
2#0491A3
3#05B6CD
4#06DBF7
5#2EE2FA
6#58E8FB
7#82EEFC
8#ABF3FD
9#D5F9FE
Tones
Muted variations
1#06444C
2#0A4148
3#0E3E44
4#123B40
5#15383C
6#193538
7#1D3234
8#212F31
9#252C2D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FD #F0FDFF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCFA #DCFAFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEF6 #BEF6FD | Secondary backgroundsInput backgroundsDividers |
| 300 | 8DEF #8DEFFC | BordersInactive statesPlaceholder text |
| 400 | 51E7 #51E7FB | Disabled statesSecondary iconsMuted text |
| 500 | 1FE0 #1FE0F9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 06C2 #06C2DB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 049A #049AAE | Active/pressed statesDark mode accentsSecondary text |
| 800 | 036E #036E7C | Text on light backgroundsHeadingsStrong borders |
| 900 | 0247 #024750 | Primary textHigh emphasis contentDark headings |
| 950 | 012C #012C32 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F0FDFF;
--charcoal-100: #DCFAFE;
--charcoal-200: #BEF6FD;
--charcoal-300: #8DEFFC;
--charcoal-400: #51E7FB;
--charcoal-500: #1FE0F9;
--charcoal-600: #06C2DB;
--charcoal-700: #049AAE;
--charcoal-800: #036E7C;
--charcoal-900: #024750;
--charcoal-950: #012C32;
}