Mint Green HEX Code
The HEX code for mint green is #98FF98. Mint is a fresh, light green color inspired by mint leaves. It's commonly used in designs requiring a fresh, clean, and natural aesthetic.
Mint Color Values
| Format | Value |
|---|---|
| HEX | #98FF98 |
| RGB | rgb(152, 255, 152) |
| HSL | hsl(120, 100%, 80%) |
| CMYK | C:40 M:0 Y:40 K:0 |
Mint Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Mint Cream | #F5FFFA | Very light |
| Pale Green | #98FB98 | Similar to mint |
| Mint | #98FF98 | Standard mint |
| Aquamarine | #7FFFD4 | Blue-tinted |
| Medium Aquamarine | #66CDAA | Darker |
| Spring Green | #00FF7F | Brighter |
Mint in Design
Mint conveys:
- Freshness: Clean, new
- Nature: Organic, herbal
- Coolness: Refreshing, calm
- Health: Wellness, organic
Using Mint in Design
``css
/* Mint palette */
:root {
--mint-light: #F5FFFA;
--mint: #98FF98;
--mint-dark: #66CDAA;
}
/* Fresh card design */
.fresh-card {
background-color: #F5FFFA;
border-left: 4px solid #98FF98;
}
`
Mint Color Palettes
| Theme | Primary | Secondary | Accent |
|---|---|---|---|
| Fresh | #98FF98 | #F5FFFA | #00CED1 |
| Nature | #98FB98 | #F0FFF0 | #228B22 |
| Pastel | #98FF98 | #FFB6C1 | #E6E6FA |
Mint is popular in food & beverage, health, and eco-friendly brand designs.Mint in Every Format
| Format | Value |
|---|---|
| HEX | #98FF98 |
| RGB | rgb(152, 255, 152) |
| HSL | hsl(120, 100%, 80%) |
| CMYK | cmyk(40%, 0%, 40%, 0%) |
| Nearest Tailwind | green-300 (#86EFAC) |
About This Colour
Mint green is around #98FF98. Note that mint is not a CSS keyword — the closest is mintcream (#F5FFFA), which is far paler. Use the hex value directly.
Will It Pass Contrast?
| Combination | Ratio | WCAG |
|---|---|---|
| Mint text on white | 1.23:1 | fails |
| Mint text on black | 17.09:1 | AAA |
| White text on mint | 1.23:1 | fails |
WCAG AA needs 4.5:1 for body text and 3:1 for text above 18pt or 14pt bold. Mint passes on black, so reserve it for dark backgrounds.Building a Palette Around It
| Role | Colour |
|---|---|
| Lighter (+20%) | #ffffff |
| Base | #98FF98 |
| Darker (−20%) | #33ff33 |
| Complementary | #ff99ff |
| Triadic | #9999ff, #ff9999 |
Tints (toward white): #b2ffb2, #ccffcc, #e5ffe5Shades (toward black): #72bf72, #4c804c, #264026
Using It
`css
:root {
--mint: #98ff98;
--mint-light: #ffffff;
--mint-dark: #33ff33;
}
.badge {
background: var(--mint);
color: #fff;
}
`
Define the colour once as a custom property rather than repeating the hex. When the brand
changes — and it will — you edit one line instead of grepping a stylesheet.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.