Emerald
#1AFF90
GreenColor Codes
All color formats for development
HEX
#1AFF90RGB
rgb(26, 255, 144)HSL
hsl(151, 100%, 55%)OKLCH
oklch(0.879 0.219 153.7)CMYK
cmyk(90%, 0%, 44%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#00FC82
2#00E074
3#00C465
4#00A857
5#008C48
6#00703A
7#00542B
8#00381D
9#001C0E
Tints
Lighter variations
1#30FF9B
2#47FFA6
3#5EFFB1
4#75FFBC
5#8CFFC8
6#A3FFD3
7#BAFFDE
8#D1FFE9
9#E8FFF4
Tones
Muted variations
1#25F490
2#30E88F
3#3CDD8F
4#47D18F
5#53C68E
6#5EBA8E
7#6AAF8D
8#75A38D
9#81988D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFF8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBFF #DBFFEE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDFF #BDFFDF | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AFF #8AFFC6 | BordersInactive statesPlaceholder text |
| 400 | 4DFF #4DFFA9 | Disabled statesSecondary iconsMuted text |
| 500 | 1AFF #1AFF90 | Primary brand colorCTAsActive elementsLinks |
| 600 | 00E0 #00E074 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 00B3 #00B35C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0080 #008042 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0052 #00522A | Primary textHigh emphasis contentDark headings |
| 950 | 0033 #00331A | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--emerald-50: #F0FFF8;
--emerald-100: #DBFFEE;
--emerald-200: #BDFFDF;
--emerald-300: #8AFFC6;
--emerald-400: #4DFFA9;
--emerald-500: #1AFF90;
--emerald-600: #00E074;
--emerald-700: #00B35C;
--emerald-800: #008042;
--emerald-900: #00522A;
--emerald-950: #00331A;
}