Charcoal
#0B4547
CyanColor Codes
All color formats for development
HEX
#0B4547RGB
rgb(11, 69, 71)HSL
hsl(182, 73%, 16%)OKLCH
oklch(0.357 0.056 198.5)CMYK
cmyk(85%, 3%, 0%, 72%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#0A3E40
2#093738
3#083031
4#07292A
5#062223
6#041B1C
7#031515
8#020E0E
9#010707
Tints
Lighter variations
1#11696C
2#178D91
3#1CB1B6
4#22D5DB
5#46DDE2
6#6BE4E8
7#90EBEE
8#B5F1F3
9#DAF8F9
Tones
Muted variations
1#0E4244
2#113F41
3#143C3E
4#17393B
5#1A3738
6#1D3435
7#203132
8#232E2F
9#262C2C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FD #F2FDFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E0F9 #E0F9FA | Light backgroundsTable row hoverSkeleton loading |
| 200 | C6F4 #C6F4F6 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9AEC #9AECEF | BordersInactive statesPlaceholder text |
| 400 | 65E3 #65E3E7 | Disabled statesSecondary iconsMuted text |
| 500 | 38DA #38DAE0 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1EBD #1EBDC2 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1896 #18969A | Active/pressed statesDark mode accentsSecondary text |
| 800 | 116B #116B6E | Text on light backgroundsHeadingsStrong borders |
| 900 | 0B45 #0B4547 | Primary textHigh emphasis contentDark headings |
| 950 | 072B #072B2C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F2FDFD;
--charcoal-100: #E0F9FA;
--charcoal-200: #C6F4F6;
--charcoal-300: #9AECEF;
--charcoal-400: #65E3E7;
--charcoal-500: #38DAE0;
--charcoal-600: #1EBDC2;
--charcoal-700: #18969A;
--charcoal-800: #116B6E;
--charcoal-900: #0B4547;
--charcoal-950: #072B2C;
}