Emerald
#4ACF9E
GreenColor Codes
All color formats for development
HEX
#4ACF9ERGB
rgb(74, 207, 158)HSL
hsl(158, 58%, 55%)OKLCH
oklch(0.769 0.136 164.9)CMYK
cmyk(64%, 0%, 24%, 19%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#35C792
2#2FB182
3#299B71
4#238561
5#1D6F51
6#185941
7#124231
8#0C2C20
9#061610
Tints
Lighter variations
1#5CD4A8
2#6ED8B1
3#80DDBB
4#92E2C5
5#A4E7CE
6#B6ECD8
7#C9F1E2
8#DBF5EC
9#EDFAF5
Tones
Muted variations
1#50C89C
2#57C19A
3#5EBB99
4#64B497
5#6BAE95
6#72A793
7#78A092
8#7F9A90
9#86938E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3FC #F3FCF9 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E3F8 #E3F8F0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CBF1 #CBF1E3 | Secondary backgroundsInput backgroundsDividers |
| 300 | A2E6 #A2E6CD | BordersInactive statesPlaceholder text |
| 400 | 72DA #72DAB4 | Disabled statesSecondary iconsMuted text |
| 500 | 4ACF #4ACF9E | Primary brand colorCTAsActive elementsLinks |
| 600 | 2FB1 #2FB182 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 258D #258D67 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1B65 #1B654A | Text on light backgroundsHeadingsStrong borders |
| 900 | 1140 #11402F | Primary textHigh emphasis contentDark headings |
| 950 | 0B28 #0B281D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--emerald-50: #F3FCF9;
--emerald-100: #E3F8F0;
--emerald-200: #CBF1E3;
--emerald-300: #A2E6CD;
--emerald-400: #72DAB4;
--emerald-500: #4ACF9E;
--emerald-600: #2FB182;
--emerald-700: #258D67;
--emerald-800: #1B654A;
--emerald-900: #11402F;
--emerald-950: #0B281D;
}