Mint green carries the hex code #98FB98, which resolves to rgb(152, 251, 152) and hsl(120, 93%, 79%). The red and blue channels sit at identical values while green runs 99 points ahead, which puts it at exactly 120° on the color wheel: pure green, diluted with white.
That #98FB98 value is also the CSS keyword palegreen, so mint green and pale green are the same color under two names. At 1.27:1 against white it fails every contrast requirement, while black text on it reaches 16.59:1 and clears AAA, and you’ll get every code format, the computed palettes, and the four elements where that inversion pays off.
What Is the Color Mint Green?
Mint green is a pale, cool-leaning green at 79% lightness. It has no keyword of its own, but its most-published value is identical to CSS palegreen, which is a useful thing to know before you add a redundant token to a design system.
The full code set for #98FB98:
- HEX: #98FB98
- RGB: rgb(152, 251, 152)
- RGBA: rgba(152, 251, 152, 1)
- HSL: hsl(120, 93%, 79%)
- HSB: 120, 39, 98
- CMYK: 39, 0, 39, 2
Equal red and blue channels are what make the hue land on exactly 120°. Any deviation between those two would push the color toward yellow-green or toward teal, and the symmetry is why mint green reads as neutral within the green family.
Sources disagree substantially on the value. HTML Color Codes publishes #98FB98, Canva uses #3EB489 for “mint,” and Adobe describes a dustier version, spanning everything from a pale tint to a mid-tone jewel green.
The gap is large enough to matter. #3EB489 reaches 2.59:1 on white and behaves like a different color entirely, so pin the hex before the name travels between files.
What Does Mint Green Mean in an Interface?
Mint green reads as success, freshness, and confirmation, sitting in the same semantic slot as any green in a severity ladder. Completed states, passed checks, positive deltas, and available statuses all default to it.
The specific advantage of a pale green is that it can be a surface. A saturated success green makes a poor background because dark text on it barely passes, while mint green hosts black text at 16.59:1.
That makes it the natural fill for a success banner. The message reads at AAA and the color still communicates the state before anyone reads a word.
Mint green also carries a distinct aesthetic register beyond its semantics. It reads as clean and slightly retro, which is why wellness, finance, and productivity brands reach for it when they want calm rather than urgency.
Keep it out of the error path entirely. Green means “fine” to users regardless of what your copy says, so a mint green error state fights itself.
How Does Mint Green Appear on Digital Screens?
Mint green renders brightly because the green channel drives near maximum output, and the human eye is more sensitive to green than to any other primary. That sensitivity is why its relative luminance runs so high and its contrast against white runs so low.
The measured values:
- #98FB98 on white: 1.27:1, fails everything
- #98FB98 on black: 16.59:1, passes AAA
- Black text on #98FB98: 16.59:1, passes AAA
- White text on #98FB98: 1.27:1, fails everything
- Dark variant #72BC72 on white: 2.29:1, still fails AA
Green’s luminance advantage cuts both ways. It’s the brightest hue at a given lightness value, which makes mint green nearly as bright as white and nearly useless as a foreground on it.
The dark variant doesn’t rescue it. #72BC72 sits at 2.29:1, so even a substantially darkened mint green fails as text on a light surface.
Push to #4C7E4C for readable green text on white. That shade reaches 5.3:1 and passes AA while keeping the hue recognizable.
Wide-gamut displays exaggerate it. On a P3 screen mint green renders more vivid than on sRGB, so the calm pastel you designed can arrive looking closer to neon.
What Are the Shades of Mint Green?
Shades come from mixing black into #98FB98 while holding hue at 120°:
- #85DC85
- #72BC72
- #5F9D5F
- #4C7E4C
- #395E39
- #263F26
- #131F13
The critical step is #4C7E4C at 5.3:1 on white, which passes AA and is the value you reach for whenever green has to be read rather than seen. Everything above it in the ramp fails on a light background.
Tints run toward white through #A0FCA0, #A8FCA8, #B0FCB0, #B8FCB8, #C0FDC0, #C8FDC8, #D0FDD0, and #D8FED8. Those steps are close enough that most interfaces need only two of them, typically a banner fill and a hover state.
Named neighbors cluster around the base and mostly fail on white:
- Pale green (#98FB98): the identical CSS keyword value
- Light green (#90EE90): marginally deeper, 1.42:1
- Celadon (#ACE1AF): softer and grayer, 1.48:1
- Aquamarine (#7FFFD4): shifted toward cyan, 1.22:1
- Mint (#3EB489): the jewel-tone version, 2.59:1
What UI Elements Work Best with Mint Green?
Mint green belongs on surfaces that host dark content and communicate a positive state. The 16.59:1 for black text on it is what makes it usable, and the 1.27:1 against white is what rules out everything else.
That eliminates text, icons on light backgrounds, functional borders, and any button with a white label. Four element types are where mint green genuinely performs.
Success Banners and Status Badges
Success states are mint green’s clearest job. Saved, verified, active, and completed all read instantly, and black text on a #98FB98 fill clears AAA at every size.
Build a two-level system from the ramp. A #D8FED8 fill with #395E39 text handles low-emphasis confirmations, and the base value handles the ones that should be noticed.
Always attach an icon or a word. Red-green deficiency collapses the difference between your success and error badges, so the hue can never carry the state alone.
Buttons and CTAs with Dark Labels
Mint green buttons work when the label is near-black. At 16.59:1 the text clears AAA, while a white label on the same fill fails at 1.27:1, which is the most common mistake with any pale green.
Use it for confirming actions rather than primary ones. “Mark complete” and “Approve” suit mint green, while a generic primary CTA is better served by a color without a success meaning attached.
Hover states come from the shade ramp. Stepping to #85DC85 keeps the hue stable where an opacity change shifts the effective contrast against whatever sits behind it.
Diff and Highlight States
Code diffs and change tracking are where mint green quietly excels. An added line on a #98FB98 background keeps its monospace text at 16.59:1, so the highlight adds meaning at no cost in legibility.
The convention is already established. Green for additions and red or pink for removals is near-universal in version control interfaces, and mint green is the pale variant that works as a full-width row fill.
Pair it with a pale red or pink for removals. Those two at matched lightness give you a symmetric system where neither side dominates.
Dark Mode Accents
Dark mode is where mint green stops fighting the math. The bright variant #3AF83A on the computed surface #0C1D0C reaches 12.26:1 and clears AAA, so it carries small text, icons, and success indicators that fail in light mode.
Pull the saturation back when you port the token. Full-intensity green against near-black reads as terminal-screen neon, and stepping down the ramp restores the calm register the light-mode value had.
What Are the Best Mint Green Color Palettes for UI?
Every palette below comes from rotating hue around #98FB98 at fixed saturation and lightness. Because lightness stays at 79%, most produce a set of pale values rather than a light-and-dark contrast pair.
Monochromatic
Monochromatic is the outlier and the most useful. Holding hue at 120° and stepping lightness gives you #98FB98, #08E908, and #D8FED8, where the middle value jumps to a saturated green because dropping 79% lightness by 40% lands near the hue’s core.
Treat #08E908 as a warning rather than an accent. It’s technically correct and visually electric, so darken it toward #4C7E4C before putting it anywhere near an interface.
Analogous
Analogous pulls neighbors 30° in each direction: #98FB98, #98FBC9, and #C9FB98. A pale aqua and a pale lime flanking the mint, all at matched lightness.
Cohesive and completely flat. Three values at identical lightness carry no hierarchy, so pair them with a dark neutral or the layout has no anchor.
Complementary
The complement sits opposite at 300°: #98FB98 paired with #FB98FB, a pale magenta. Maximum hue separation with no contrast separation, since both sit at 79% lightness.
Use them on adjacent surfaces, not as foreground and background. Magenta text on mint fails, and a magenta card beside a mint card reads clearly.
Triadic
Triadic gives you #98FB98, #9898FB, and #FB9898: mint, periwinkle, and pale coral. This is the strongest categorical set of the five, since three distinct hues at matched lightness make an even category system.
Verify it under simulation before shipping. Matched-lightness pastels converge under deuteranopia faster than saturated hues, because there’s little chroma left to separate them.
Split-Complementary
Split-complementary softens the pairing: #98FB98, #C998FB, and #FB98C9. Mint with a pale violet and a pale rose, and the most flexible of the five for a full interface.
Anchor it with near-black text. Visily’s theme tools can generate the shade ladder beneath each pastel so the dark partners come out accessible rather than mixed by eye.
Which Colors Are Similar to Mint Green?
Five values sit close enough to #98FB98 to be confused with it, and one is identical:
- Pale green (#98FB98): the same hex under a different name
- Light green (#90EE90): marginally deeper and warmer, 1.42:1 on white
- Celadon (#ACE1AF): grayer and softer, 1.48:1
- Aquamarine (#7FFFD4): pushed well toward cyan, 1.22:1
- Mint (#3EB489): the saturated jewel-tone version, 2.59:1
Mint at #3EB489 is the substitution worth knowing. It’s a genuinely different design decision rather than a variant, reading as a confident brand green where #98FB98 reads as a soft success surface.
Celadon is the choice when mint feels too clinical. Its slight desaturation gives it a ceramic, natural quality that suits wellness and craft contexts.
Which Colors Pair Best with Mint Green?
Near-black is mint green’s essential partner. At 16.59:1 it’s the only text color that works on a mint green surface, and every layout using this color depends on it.
Deep green from the shade ramp is the natural accent. #4C7E4C shares the base’s exact hue, passes AA on white at 5.3:1, and gives the palette a text color the base can’t provide.
Coral and warm pink give it life. The pale coral from the triadic scheme balances mint’s coolness, and the pairing avoids the slightly institutional feel that mint alone can carry.
Charcoal and warm wood tones are the sophisticated option. Mint green against a deep warm neutral reads as considered rather than as a hospital corridor, which is the main risk with a pale green.
Apply the 60-30-10 split:
- 60% neutral: white or off-white surfaces
- 30% mint green and its tints: success surfaces, banners, and fills
- 10% deep green or coral: the accent carrying interactive meaning
Which Colors Should You Avoid Pairing with Mint Green?
White fails first. At 1.27:1 a mint green element on white has no perceptible boundary, so any border, divider, or outline built that way disappears on most screens.
Two computed near-clashes cause the next problem: #98FBC1 and #C1FB98. Both sit 25° away at identical lightness, differing in hue and not at all in luminance.
Red at similar lightness is the accessibility trap. A pale red and mint green sit on the axis that red-green deficiency collapses, so a green-versus-red status system reads as one color to roughly 8% of men.
Yellow is the aesthetic problem. Mint green and pale yellow at matched lightness produce a combination that reads as faded rather than fresh, and neither color does its job.
Does Mint Green Meet Accessibility Standards?
Mint green fails as a foreground and passes as a background at the highest level. The 1.27:1 measurement against white falls below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Where it lands across the common pairings:
- #98FB98 on white: 1.27:1, fails AA and the 3:1 non-text floor
- White on #98FB98: 1.27:1, fails
- Black on #98FB98: 16.59:1, passes AAA
- #4C7E4C on white: 5.3:1, passes AA
- #3AF83A on #0C1D0C: 12.26:1, passes AAA
The black-on-mint result is what makes the color work. Any mint green surface carrying dark text is compliant at every size and weight.
Red-green color vision deficiency is the serious constraint, and it applies more to green than to almost any other hue. Under deuteranopia and protanopia mint green shifts toward a pale beige-yellow and converges with pale reds and oranges.
Never let green carry a state alone. A checkmark, the word “success,” or a position in a ranked list preserves the meaning when the hue collapses, and this matters more for green than for any color in this cluster.
How Can You Convert Mint Green Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same green differently:
- HEX #98FB98: the default in design files and CSS, with the symmetric pattern that marks a pure hue
- RGB rgb(152, 251, 152): identical red and blue channels
- RGBA rgba(152, 251, 152, 1): adds alpha for tinted overlays and diff highlights
- HSL hsl(120, 93%, 79%): hue lands on exactly 120°
- HSB 120, 39, 98: the picker model, reporting saturation very differently
- CMYK 39, 0, 39, 2: equal cyan and yellow with no magenta
The repeating hex pattern is a useful signal. When the first and third channel pairs match, the color sits on one of the three primary or secondary axes, which tells you the hue before you open a picker.
HSL is what makes the mint ramp manageable. Holding hue at 120° and stepping lightness generates the entire family, including the AA-compliant #4C7E4C that the base can never be.
CMYK converts cleanly here. The symmetric 39, 0, 39 mix is well inside the process gamut, so printed mint green tracks the screen closely, though the paper’s own warmth will shift it slightly.
Wrapping Up
Mint green is a success surface, not a success text color. Use #98FB98 for banner fills, diff highlights, and confirming buttons with near-black labels, drop to #4C7E4C when green has to be read on white, reach for #3AF83A in dark mode where it clears AAA, and always pair the hue with an icon or a word so the state survives red-green color vision deficiency.
Stop deriving those steps one at a time. Open Visily and use its AI-powered design tools to generate your mint green tint and shade ladder, accessible success states, and matched accent pairings across the entire design in one pass.
