Mint Background
#3EB489 · rgb(62, 180, 137)
About the mint background
Mint (#3EB489) is a green cooled toward teal and lifted with white — rgb(62, 180, 137). It's the freshness of mint leaves and the calm of a spa in one: clean, restorative, quietly optimistic.
It works as a mid-light background where darker greens would swallow text: black on mint measures about 8:1 for accessible copy, and pastel companions (blush, lavender, cream) build soft, modern palettes around it.
What to use a mint background for
- Wellness, spa and self-care branding
- Fresh food and beverage packaging
- Calm fintech and health app interfaces
- Pastel palettes with pink, lavender and cream
How to use mint in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page mint background */
body {
margin: 0;
background-color: #3EB489;
}
/* A single section or element */
.hero {
background-color: rgb(62, 180, 137);
} Mint shades and tints
Click any swatch to copy it. Tints mix mint with white; shades mix it with black.
Mint background FAQ
What is mint green's hex code?
The commonly cited mint is #3EB489 — rgb(62, 180, 137). Softer 'mint cream' variants exist near #D0F0E0 when you want a paler wash.
What pairs well with a mint background?
Blush pink, lavender, cream and charcoal. For text, near-black (#1F2937) on mint holds about 8:1 — comfortably WCAG AA.
What is the hex code for mint?
Mint is #3EB489 in hexadecimal, rgb(62, 180, 137) in RGB and hsl(158, 49%, 47%) in HSL. Paste #3EB489 into any CSS background-color property to use it.
How do I set a mint background in CSS?
Add background-color: #3EB489; to any element, or apply it to the whole page: body { background-color: #3EB489; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(62, 180, 137) — with identical results.