Charcoal
#083C4A
CyanColor Codes
All color formats for development
HEX
#083C4ARGB
rgb(8, 60, 74)HSL
hsl(193, 80%, 16%)OKLCH
oklch(0.331 0.056 221.1)CMYK
cmyk(89%, 19%, 0%, 71%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#073542
2#072F3B
3#062A33
4#05242C
5#041E25
6#03181D
7#021216
8#020C0F
9#010607
Tints
Lighter variations
1#0C5A70
2#117A97
3#1599BD
4#19B8E4
5#3EC4EA
6#65D0EE
7#8BDCF2
8#B2E8F6
9#D8F3FB
Tones
Muted variations
1#0B3946
2#0F3843
3#123640
4#15343C
5#183239
6#1C3036
7#1F2E33
8#222C2F
9#262B2C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FB #F1FBFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFF5 #DFF5FB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C3ED #C3EDF8 | Secondary backgroundsInput backgroundsDividers |
| 300 | 95DF #95DFF3 | BordersInactive statesPlaceholder text |
| 400 | 5ECE #5ECEED | Disabled statesSecondary iconsMuted text |
| 500 | 30C0 #30C0E8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 16A3 #16A3CA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1282 #1282A1 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0D5D #0D5D73 | Text on light backgroundsHeadingsStrong borders |
| 900 | 083B #083B49 | Primary textHigh emphasis contentDark headings |
| 950 | 0525 #05252E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F1FBFD;
--charcoal-100: #DFF5FB;
--charcoal-200: #C3EDF8;
--charcoal-300: #95DFF3;
--charcoal-400: #5ECEED;
--charcoal-500: #30C0E8;
--charcoal-600: #16A3CA;
--charcoal-700: #1282A1;
--charcoal-800: #0D5D73;
--charcoal-900: #083B49;
--charcoal-950: #05252E;
}