Charcoal
#495E69
BlueColor Codes
All color formats for development
HEX
#495E69RGB
rgb(73, 94, 105)HSL
hsl(201, 18%, 35%)OKLCH
oklch(0.469 0.031 231.1)CMYK
cmyk(30%, 10%, 0%, 59%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#42555F
2#3B4B54
3#33424A
4#2C383F
5#252F35
6#1D262A
7#161C20
8#0F1315
9#07090B
Tints
Lighter variations
1#57707D
2#648190
3#7691A0
4#8AA1AD
5#9DB1BB
6#B1C0C9
7#C4D0D6
8#D8E0E4
9#EBEFF1
Tones
Muted variations
1#4B5E68
2#4C5D66
3#4E5D64
4#505C63
5#515C61
6#535B60
7#545B5E
8#565A5C
9#585A5B
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F6F8 #F6F8F9 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EAEE #EAEEF0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D8E0 #D8E0E4 | Secondary backgroundsInput backgroundsDividers |
| 300 | BAC8 #BAC8CF | BordersInactive statesPlaceholder text |
| 400 | 96AB #96ABB6 | Disabled statesSecondary iconsMuted text |
| 500 | 7892 #7892A1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 5C76 #5C7684 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 495E #495E69 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3443 #34434B | Text on light backgroundsHeadingsStrong borders |
| 900 | 212B #212B30 | Primary textHigh emphasis contentDark headings |
| 950 | 151B #151B1E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F6F8F9;
--charcoal-100: #EAEEF0;
--charcoal-200: #D8E0E4;
--charcoal-300: #BAC8CF;
--charcoal-400: #96ABB6;
--charcoal-500: #7892A1;
--charcoal-600: #5C7684;
--charcoal-700: #495E69;
--charcoal-800: #34434B;
--charcoal-900: #212B30;
--charcoal-950: #151B1E;
}