Named color · #487D4A
Mint Green
Mint Green is #487D4A: rgb(72 125 74), hsl(122 27% 39%), oklch(0.539 0.097 144.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Mint Green color name →
#487D4A
oklch(0.539 0.097 144.9)
Color conversions
- HEX
- #487d4a
- RGB
- rgb(72 125 74)
- HSL
- hsl(122 27% 39%)
- HWB
- hwb(122 28% 51%)
- OKLCH
- oklch(0.539 0.097 144.9)
- OKLab
- oklab(0.539 -0.079 0.056)
- CIE Lab
- lab(47.7 -27.01 22.07)
- LCH
- lch(47.7 34.87 140.7)
- CMYK
- cmyk(42% 0% 41% 51%)
Tints · Shades · Tones
Tints
- 5A8A5B
- 6C966C
- 7EA37E
- 90B090
- A2BDA1
- B4CAB4
- C6D7C6
- D9E4D9
- ECF2EC
Shades
- 3D6C3F
- 335B35
- 294B2A
- 1F3B20
- 162C17
- 0D1E0E
- 061106
- 020502
- 000100
Tones
- 4E7E50
- 557E55
- 5B7E5B
- 607F60
- 667F66
- 6B7F6B
- 718070
- 768076
- 7B807B
Color harmonies
Complementary +180°
- 487D4A
Mint Green
- 8A5A8D
≈ Ancient Murasaki Purple
Analogous -30° +30°
- 487D4A
Mint Green
- 6D752C
≈ Olive Drab
- 15806B
≈ Tropical Green
Triadic +120° +240°
- 487D4A
Mint Green
- 526DA7
≈ New Age Blue
- 9F5651
≈ Bravado Red
Split-complementary +150° +210°
- 487D4A
Mint Green
- 7262A0
≈ Scampi
- 9A5571
≈ Pink Tulip
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAOn white
WCAG 4.87:1 · APCA Lc 74
Ag
FailOn black
WCAG 4.30:1 · APCA Lc 28
Best text color: #FFFFFF
WCAG 4.87:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--mint-green: #487d4a;
--mint-green-rgb: 72 125 74;
--mint-green-oklch: oklch(0.539 0.097 144.9);
}
.element {
color: var(--mint-green);
background-color: hsl(122 27% 39%);
border-color: oklch(0.539 0.097 144.9);
}Tailwind CSS v4
@theme {
--color-mint-green: #487d4a;
--color-mint-green-50: #e4fde5;
--color-mint-green-100: #d4f1d6;
--color-mint-green-200: #bae0bd;
--color-mint-green-300: #97c59b;
--color-mint-green-400: #7aae7b;
--color-mint-green-500: #5b975d;
--color-mint-green-600: #4e804f;
--color-mint-green-700: #3e663f;
--color-mint-green-800: #2e4b2c;
--color-mint-green-900: #1f341d;
--color-mint-green-950: #0e1f0d;
}SCSS
$mint-green: #487d4a;
$mint-green-rgb: 72, 125, 74;
$mint-green-light: mix(#fff, $mint-green, 20%);
$mint-green-dark: mix(#000, $mint-green, 20%);
.element {
color: $mint-green;
box-shadow: 0 0 0 2px rgba($mint-green, 0.35);
}