Emerald
#04DC9B
GreenColor Codes
All color formats for development
HEX
#04DC9BRGB
rgb(4, 220, 155)HSL
hsl(162, 96%, 44%)OKLCH
oklch(0.791 0.171 163)CMYK
cmyk(98%, 0%, 30%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#04C68C
2#04B07C
3#039A6D
4#03845D
5#026E4E
6#02583E
7#01422F
8#012C1F
9#001610
Tints
Lighter variations
1#05F8AF
2#1FFAB9
3#3BFBC1
4#57FCCA
5#73FCD3
6#8FFDDC
7#ABFDE5
8#C7FEED
9#E3FEF6
Tones
Muted variations
1#0FD197
2#1AC693
3#25BC8E
4#30B18A
5#3AA686
6#459B81
7#50917D
8#5B8679
9#657B75
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCFE #DCFEF4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEFE #BEFEEB | Secondary backgroundsInput backgroundsDividers |
| 300 | 8CFD #8CFDDB | BordersInactive statesPlaceholder text |
| 400 | 50FB #50FBC8 | Disabled statesSecondary iconsMuted text |
| 500 | 1EFA #1EFAB8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 04DC #04DC9B | Hover statesFocus ringsPrimary buttons hover |
| 700 | 04AF #04AF7C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 037D #037D58 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0250 #025038 | Primary textHigh emphasis contentDark headings |
| 950 | 0132 #013223 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--emerald-50: #F0FFFA;
--emerald-100: #DCFEF4;
--emerald-200: #BEFEEB;
--emerald-300: #8CFDDB;
--emerald-400: #50FBC8;
--emerald-500: #1EFAB8;
--emerald-600: #04DC9B;
--emerald-700: #04AF7C;
--emerald-800: #037D58;
--emerald-900: #025038;
--emerald-950: #013223;
}