Emerald
#6EDE99
GreenColor Codes
All color formats for development
HEX
#6EDE99RGB
rgb(110, 222, 153)HSL
hsl(143, 63%, 65%)OKLCH
oklch(0.817 0.143 154.6)CMYK
cmyk(50%, 0%, 31%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#53D886
2#37D273
3#2BBD63
4#25A255
5#1F8747
6#196C39
7#12512A
8#0C361C
9#061B0E
Tints
Lighter variations
1#7CE1A3
2#8BE5AD
3#99E8B7
4#A8EBC2
5#B6EECC
6#C5F2D6
7#D3F5E0
8#E2F8EB
9#F0FCF5
Tones
Muted variations
1#73D89A
2#79D39B
3#7ECD9D
4#84C79E
5#8AC29F
6#8FBCA1
7#95B7A2
8#9BB1A3
9#A0ABA4
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3FC #F3FCF6 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2F8 #E2F8EB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C9F3 #C9F3D9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9FE9 #9FE9BC | BordersInactive statesPlaceholder text |
| 400 | 6EDE #6EDE99 | Disabled statesSecondary iconsMuted text |
| 500 | 44D5 #44D57B | Primary brand colorCTAsActive elementsLinks |
| 600 | 2AB7 #2AB760 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2191 #21914C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1868 #186836 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0F43 #0F4323 | Primary textHigh emphasis contentDark headings |
| 950 | 092A #092A16 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--emerald-50: #F3FCF6;
--emerald-100: #E2F8EB;
--emerald-200: #C9F3D9;
--emerald-300: #9FE9BC;
--emerald-400: #6EDE99;
--emerald-500: #44D57B;
--emerald-600: #2AB760;
--emerald-700: #21914C;
--emerald-800: #186836;
--emerald-900: #0F4323;
--emerald-950: #092A16;
}