Charcoal
#024F2B
GreenColor Codes
All color formats for development
HEX
#024F2BRGB
rgb(2, 79, 43)HSL
hsl(152, 95%, 16%)OKLCH
oklch(0.376 0.091 155.2)CMYK
cmyk(97%, 0%, 46%, 69%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#024827
2#024023
3#01381E
4#01301A
5#012816
6#012011
7#01180D
8#001009
9#000804
Tints
Lighter variations
1#037942
2#04A359
3#05CD70
4#06F786
5#2EFA9B
6#58FBAF
7#82FCC3
8#ABFDD7
9#D5FEEB
Tones
Muted variations
1#064C2B
2#0A482B
3#0E442B
4#12402A
5#153C2A
6#19382A
7#1D342A
8#213129
9#252D29
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFF8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCFE #DCFEEE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEFD #BEFDE0 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8DFC #8DFCC8 | BordersInactive statesPlaceholder text |
| 400 | 51FB #51FBAB | Disabled statesSecondary iconsMuted text |
| 500 | 1FF9 #1FF994 | Primary brand colorCTAsActive elementsLinks |
| 600 | 06DB #06DB77 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 04AE #04AE5F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 037C #037C44 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0250 #02502B | Primary textHigh emphasis contentDark headings |
| 950 | 0132 #01321B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--charcoal-50: #F0FFF8;
--charcoal-100: #DCFEEE;
--charcoal-200: #BEFDE0;
--charcoal-300: #8DFCC8;
--charcoal-400: #51FBAB;
--charcoal-500: #1FF994;
--charcoal-600: #06DB77;
--charcoal-700: #04AE5F;
--charcoal-800: #037C44;
--charcoal-900: #02502B;
--charcoal-950: #01321B;
}