Charcoal
#005230
GreenColor Codes
All color formats for development
HEX
#005230RGB
rgb(0, 82, 48)HSL
hsl(155, 100%, 16%)OKLCH
oklch(0.386 0.091 157.5)CMYK
cmyk(100%, 0%, 41%, 68%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#00492B
2#004126
3#003921
4#00311D
5#002918
6#002113
7#00180E
8#00100A
9#000805
Tints
Lighter variations
1#007C49
2#00A762
3#00D27B
4#00FD94
5#29FFA6
6#54FFB8
7#7EFFC9
8#A9FFDB
9#D4FFED
Tones
Muted variations
1#044E2F
2#08492E
3#0C452E
4#10412D
5#143D2C
6#18392C
7#1D352B
8#21312A
9#252D29
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFF9 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBFF #DBFFF0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDFF #BDFFE3 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AFF #8AFFCE | BordersInactive statesPlaceholder text |
| 400 | 4DFF #4DFFB5 | Disabled statesSecondary iconsMuted text |
| 500 | 1AFF #1AFF9F | Primary brand colorCTAsActive elementsLinks |
| 600 | 00E0 #00E083 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 00B3 #00B368 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0080 #00804A | Text on light backgroundsHeadingsStrong borders |
| 900 | 0052 #005230 | Primary textHigh emphasis contentDark headings |
| 950 | 0033 #00331E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F0FFF9;
--charcoal-100: #DBFFF0;
--charcoal-200: #BDFFE3;
--charcoal-300: #8AFFCE;
--charcoal-400: #4DFFB5;
--charcoal-500: #1AFF9F;
--charcoal-600: #00E083;
--charcoal-700: #00B368;
--charcoal-800: #00804A;
--charcoal-900: #005230;
--charcoal-950: #00331E;
}