Emerald
#3ADF9A
GreenColor Codes
All color formats for development
HEX
#3ADF9ARGB
rgb(58, 223, 154)HSL
hsl(155, 72%, 55%)OKLCH
oklch(0.804 0.166 160.2)CMYK
cmyk(74%, 0%, 31%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#23D98D
2#1FC17E
3#1BA96E
4#18915E
5#14794F
6#10603F
7#0C482F
8#08301F
9#041810
Tints
Lighter variations
1#4DE2A4
2#61E5AE
3#75E9B8
4#89ECC2
5#9CEFCD
6#B0F2D7
7#C4F5E1
8#D8F9EB
9#EBFCF5
Tones
Muted variations
1#42D799
2#4ACE97
3#52C696
4#5BBE95
5#63B693
6#6BAD92
7#73A590
8#7C9D8F
9#84958E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FD #F2FDF8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E0FA #E0FAEF | Light backgroundsTable row hoverSkeleton loading |
| 200 | C6F6 #C6F6E2 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9AEF #9AEFCB | BordersInactive statesPlaceholder text |
| 400 | 65E6 #65E6B0 | Disabled statesSecondary iconsMuted text |
| 500 | 3ADF #3ADF9A | Primary brand colorCTAsActive elementsLinks |
| 600 | 1FC1 #1FC17E | Hover statesFocus ringsPrimary buttons hover |
| 700 | 199A #199A64 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 126E #126E47 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0B46 #0B462E | Primary textHigh emphasis contentDark headings |
| 950 | 072C #072C1D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--emerald-50: #F2FDF8;
--emerald-100: #E0FAEF;
--emerald-200: #C6F6E2;
--emerald-300: #9AEFCB;
--emerald-400: #65E6B0;
--emerald-500: #3ADF9A;
--emerald-600: #1FC17E;
--emerald-700: #199A64;
--emerald-800: #126E47;
--emerald-900: #0B462E;
--emerald-950: #072C1D;
}