Mint
#61EAAD
GreenColor Codes
All color formats for development
HEX
#61EAADRGB
rgb(97, 234, 173)HSL
hsl(153, 77%, 65%)OKLCH
oklch(0.846 0.149 161.3)CMYK
cmyk(59%, 0%, 26%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#44E79D
2#26E38E
3#1BCD7D
4#17B06B
5#139359
6#0F7547
7#0B5836
8#083B24
9#041D12
Tints
Lighter variations
1#71EDB5
2#81EFBD
3#90F1C5
4#A0F3CE
5#B0F5D6
6#C0F7DE
7#D0F9E6
8#DFFBEF
9#EFFDF7
Tones
Muted variations
1#68E4AC
2#6FDDAB
3#76D6AB
4#7DCFAA
5#83C8A9
6#8AC1A8
7#91BAA8
8#98B3A7
9#9FADA6
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FD #F1FDF8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFFB #DFFBEF | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4F7 #C4F7E0 | Secondary backgroundsInput backgroundsDividers |
| 300 | 97F2 #97F2C9 | BordersInactive statesPlaceholder text |
| 400 | 61EA #61EAAD | Disabled statesSecondary iconsMuted text |
| 500 | 34E5 #34E595 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1AC7 #1AC779 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 159E #159E60 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0F71 #0F7145 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0948 #09482C | Primary textHigh emphasis contentDark headings |
| 950 | 062D #062D1B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--mint-50: #F1FDF8;
--mint-100: #DFFBEF;
--mint-200: #C4F7E0;
--mint-300: #97F2C9;
--mint-400: #61EAAD;
--mint-500: #34E595;
--mint-600: #1AC779;
--mint-700: #159E60;
--mint-800: #0F7145;
--mint-900: #09482C;
--mint-950: #062D1B;
}