Emerald
#4BCE5C
GreenColor Codes
All color formats for development
HEX
#4BCE5CRGB
rgb(75, 206, 92)HSL
hsl(128, 57%, 55%)OKLCH
oklch(0.755 0.193 145.6)CMYK
cmyk(64%, 0%, 55%, 19%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#36C649
2#30B041
3#2A9A39
4#248431
5#1E6E29
6#185821
7#124218
8#0C2C10
9#061608
Tints
Lighter variations
1#5DD36D
2#6FD87D
3#81DC8D
4#93E19D
5#A5E6AE
6#B7EBBE
7#C9F0CE
8#DBF5DE
9#EDFAEF
Tones
Muted variations
1#51C761
2#58C166
3#5EBA6B
4#65B36F
5#6CAD74
6#72A679
7#79A07E
8#7F9983
9#869387
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3FC #F3FCF4 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E3F7 #E3F7E6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CBF1 #CBF1D0 | Secondary backgroundsInput backgroundsDividers |
| 300 | A3E6 #A3E6AC | BordersInactive statesPlaceholder text |
| 400 | 73D9 #73D980 | Disabled statesSecondary iconsMuted text |
| 500 | 4BCE #4BCE5C | Primary brand colorCTAsActive elementsLinks |
| 600 | 30B0 #30B041 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 268C #268C34 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1B64 #1B6425 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1240 #124018 | Primary textHigh emphasis contentDark headings |
| 950 | 0B28 #0B280F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--emerald-50: #F3FCF4;
--emerald-100: #E3F7E6;
--emerald-200: #CBF1D0;
--emerald-300: #A3E6AC;
--emerald-400: #73D980;
--emerald-500: #4BCE5C;
--emerald-600: #30B041;
--emerald-700: #268C34;
--emerald-800: #1B6425;
--emerald-900: #124018;
--emerald-950: #0B280F;
}