Light green carries the hex code #90EE90, which resolves to rgb(144, 238, 144) and hsl(120, 73%, 75%). Red and blue sit at identical values while green runs 94 points ahead, which places the hue at exactly 120° and makes it a pure green diluted with white.
Light green reaches 1.42:1 against white and 14.82:1 against black, so it fails every light-mode text requirement and clears AAA as a dark-text surface. This page covers every code format, the computed palettes, the four elements where light green performs, and how it differs from the several near-identical greens it gets confused with.
What Is the Color Light Green?
Light green occupies 120° on the color wheel at 73% saturation and 75% lightness. The CSS keyword lightgreen maps to #90EE90 exactly, which makes it one of the few pale greens with a specified value rather than a convention.
The full code set for #90EE90:
- HEX: #90EE90
- RGB: rgb(144, 238, 144)
- RGBA: rgba(144, 238, 144, 1)
- HSL: hsl(120, 73%, 75%)
- HSB: 120, 39, 93
- CMYK: 39, 0, 39, 7
Identical red and blue channels put the hue on exactly 120°, the pure green axis. Any difference between those two would tip the color toward yellow-green or toward teal, and the symmetry is why light green reads as neutral within its family.
The repeating hex pattern gives the same information at a glance. Matching first and third channel pairs indicate a hue sitting on a primary or secondary axis, which is worth recognising before opening a picker.
How Does Light Green Differ From Mint, Pale Green, and Celadon?
Four pale greens sit close enough to be swapped by accident, and the differences are small enough that a design system can end up carrying three redundant tokens. Anyone building a green scale should settle the distinctions first.
Here’s what each name resolves to:
- Light green (#90EE90): the CSS keyword, hue 120, lightness 75%
- Pale green (#98FB98): a separate CSS keyword, hue 120, lightness 79%
- Mint green (#98FB98): most commonly published as the same value as pale green
- Celadon (#ACE1AF): hue 123, desaturated to 46%, a grayer green
- Mint (#3EB489): hue 158, lightness 47%, a genuinely different jewel-tone
Light green and pale green are the pair that causes the most trouble. Both are CSS keywords, both sit at hue 120, and they differ by four lightness points, which is visible side by side and invisible in isolation.
Celadon is the one with a real distinction. Its 46% saturation makes it noticeably grayer, which gives it a ceramic quality the two brighter greens lack.
Mint at #3EB489 belongs in a different conversation entirely. At 47% lightness it’s a mid-tone jewel green that behaves nothing like the pale family, and using the same word for both is the source of most green-token confusion.
How Does Light Green Appear on Digital Screens?
Light green renders brightly because the green channel drives close to maximum and human vision is more sensitive to green than to any other primary. That sensitivity pushes its luminance high and its contrast against white low.
The measured values set the constraints:
- #90EE90 on white: 1.42:1, fails everything
- #90EE90 on black: 14.82:1, passes AAA
- Black text on #90EE90: 14.82:1, passes AAA
- White text on #90EE90: 1.42:1, fails
- Dark variant #6CB26C on white: 2.55:1, still fails AA
Green’s luminance weighting explains the whole picture. Relative luminance counts green at 71.52%, so a pale green sits nearly as bright as white and behaves accordingly.
Darkening only partly helps. #6CB26C reaches 2.55:1, so even a substantially deeper green still fails as text on a light surface.
The shade at #487748 reaches 5.7:1 and passes AA. That value is the one to use whenever green has to be read rather than seen on a white background.
Wide-gamut displays intensify it. On a P3 screen #90EE90 renders more vivid than on sRGB, so a soft success green can arrive looking considerably brighter than intended.
What Are the Shades of Light Green?
Shades come from mixing black into #90EE90 while holding hue at 120°:
- #7ED07E
- #6CB26C
- #5A955A
- #487748
- #365936
- #243C24
- #121E12
The critical step is #487748 at 5.7:1 on white, which passes AA while keeping the green recognizable. Everything above it in the ramp fails as body copy on a light surface.
Tints run toward white through #9AEF9A, #A3F1A3, #ADF2AD, #B6F4B6, #BFF5BF, #C9F7C9, #D2F8D2, and #DCF9DC. Those pale steps handle banner fills and hover surfaces, though the range is compressed because the base already sits high.
Named neighbors cluster tightly, as covered in the disambiguation above:
- Pale green (#98FB98): the brighter CSS keyword, 1.27:1 on white
- Celadon (#ACE1AF): grayer and softer, 1.48:1
- Dark sea green (#8FBC8F): desaturated and deeper, 2.15:1
- Medium sea green (#3CB371): a mid-tone jewel green, 2.71:1
- Forest green (#228B22): deep enough to pass AA, 4.6:1
What UI Elements Work Best with Light Green?
Light green belongs on surfaces that host dark content and communicate a positive state. The 14.82:1 for black text on it is what makes it usable, and the 1.42:1 against white rules out everything else.
Text, icons on light backgrounds, functional borders, and any control with a white label all fall outside its range. Four element types remain where light green genuinely performs.
Success Surfaces and Confirmation Banners
Success states are light green’s clearest semantic job. Saved, verified, approved, and completed all read instantly, and near-black text on a #90EE90 fill clears AAA at every size.
A two-level system comes from the ramp. #DCF9DC with #365936 text handles quiet confirmations, and the base value handles the ones that should be noticed.
An icon or a word must always accompany the color. Red-green color vision deficiency collapses the difference between success and error badges, so hue can never carry the state alone.
Status Tags and Availability Indicators
Tags suit light green because they’re small, semantically loaded in a useful direction, and often need to sit alongside other status colors. Available, in stock, online, and active all fit.
Light green works better than a saturated green here for a specific reason. A tag needs to host its own label, and a pale fill with dark text is legible where a saturated fill with white text often isn’t.
The distinction from your warning and error tags needs to be structural. Shape, icon, and position should differ, not just hue.
Data Visualizations
Charts use light green for positive deltas, completed segments, and the “good” end of a range. Its pale value means it reads as a fill rather than as an emphasis, which suits background regions and stacked areas.
Fills and lines need different values. #90EE90 works for area fills, and a 2px line has to drop to #487748 or it disappears against white gridlines.
Red-green deficiency is the serious constraint in charts specifically. A green-versus-red comparison collapses for roughly 8% of men, so direct labels or patterns should carry the meaning alongside the color.
Dark Mode Accents
Dark mode reverses light green’s problem entirely. The bright variant #4FE34F on the computed surface #0C1D0C reaches 10.39:1 and clears AAA, so it carries small text, icons, and success indicators that fail in light mode.
Saturation should come down when a token moves into a dark theme. Full-intensity green against near-black reads as terminal neon, and stepping down the ramp restores the calmer register.
Terminal and log interfaces have used green this way for decades. Success output, passing tests, and added lines all rely on it precisely because it reads clearly against dark surfaces.
What Are the Best Light Green Color Palettes for UI?
Every palette below comes from rotating hue around #90EE90 at fixed saturation and lightness. Because lightness stays at 75%, most of these produce pale sets rather than a light-and-dark pair.
Monochromatic
The monochromatic scheme holds hue at 120° and moves lightness: #90EE90, #1FC61F, and #DCF9DC. The middle value jumps to a saturated green, since dropping 75% lightness by 40% lands near the hue’s core.
#1FC61F should be treated with caution rather than used directly. At 2.4:1 on white it’s electric and still fails, so darkening toward #487748 is the practical move.
Analogous
Analogous pulls neighbors 30° in each direction: #90EE90, #90EEBF, and #BFEE90. A pale aqua-green and a yellow-green flanking the base, all at matched lightness.
Cohesive and completely flat. Three values at identical lightness carry no hierarchy, so a dark neutral has to anchor the layout.
Complementary
Light green’s complement sits opposite at 300°: #90EE90 paired with #EE90EE, a pale violet. Maximum hue separation with no contrast separation, since both sit at 75% lightness.
Adjacent surfaces work better than foreground and background. Violet text on green fails, and a violet card beside a green card reads clearly.
Triadic
The triadic scheme gives you #90EE90, #9090EE, and #EE9090: light green, a periwinkle, and a pale coral. Three distinct hues at matched lightness, which makes an even category system.
This set has a specific accessibility advantage. The periwinkle and coral separate from the green under red-green deficiency better than a green-and-red pair does.
Split-Complementary
Split-complementary softens the pairing: #90EE90, #BF90EE, and #EE90BF. Light green with a pale violet and a rose, and the most flexible of the five for a full interface.
A near-black text color anchors it. 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 Light Green?
Five values sit close enough to #90EE90 to be confused with it:
- Pale green (#98FB98): the other CSS keyword, four lightness points brighter, 1.27:1
- Celadon (#ACE1AF): grayer and softer, 1.48:1
- Dark sea green (#8FBC8F): desaturated and deeper, 2.15:1
- Medium sea green (#3CB371): a mid-tone jewel green, 2.71:1
- Forest green (#228B22): deep enough to pass AA at 4.6:1
Forest green is the substitution that solves the text problem. Anyone hunting for a green that works as body copy on white is describing forest green, and reaching for it directly avoids a round of failed contrast checks.
Dark sea green suits a different need. Its desaturation gives it a muted, natural quality that reads as considered where the brighter greens read as system feedback.
Which Colors Pair Best with Light Green?
Near-black is light green’s essential partner. At 14.82:1 it’s the text color that makes every light green surface work, and every layout using this color depends on it.
Deep green from the shade ramp gives the palette hierarchy. #487748 shares the base’s exact hue, passes AA on white at 5.7:1, and provides the text color the base can’t.
Warm neutrals prevent the clinical problem. Light green alone reads as institutional, and cream or warm sand somewhere in the layout keeps the interface from feeling like a form.
Coral and warm pink give it life. The pale coral from the triadic scheme balances the green’s coolness while staying distinguishable under color vision deficiency, which a red accent would not.
The 60-30-10 split applies as follows:
- 60% neutral: white or off-white surfaces
- 30% light 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 Light Green?
White fails first. At 1.42:1 a light green element on white has no perceptible boundary, so borders and outlines built that way disappear on most screens.
Two computed near-clashes cause the next problem: #90EEB7 and #B7EE90. Both sit 25° away at identical lightness, offering hue difference with no luminance difference.
Red at similar lightness is the accessibility failure. A pale red and light green sit on the axis that red-green deficiency collapses, so a green-versus-red status system reads as one color to a substantial share of users.
Yellow-green is the aesthetic problem. Light green beside a lime at matched lightness produces a combination that reads as murky, and neither color does its job.
Does Light Green Meet Accessibility Standards?
Light green fails as a foreground and passes as a background at the highest level. The 1.42:1 measurement against white falls below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Light green lands as follows across the common pairings:
- #90EE90 on white: 1.42:1, fails AA and the 3:1 non-text floor
- White on #90EE90: 1.42:1, fails
- Black on #90EE90: 14.82:1, passes AAA
- #487748 on white: 5.7:1, passes AA
- #4FE34F on #0C1D0C: 10.39:1, passes AAA
The black-on-green result is what makes the color work at all. Any light green surface carrying dark text is compliant at every size and weight.
Red-green color vision deficiency applies more forcefully to green than to almost any other hue. Under deuteranopia and protanopia light green shifts toward a pale beige-yellow and converges with pale reds and oranges.
Green should never carry a state alone, and this matters more here than for any color in the cluster. A checkmark, the word “success”, or a position in a ranked list preserves the meaning when the hue collapses.
How Can You Convert Light Green Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same green from a different angle:
- HEX #90EE90: the default in design files and CSS, with the symmetric pattern of a primary-axis hue
- RGB rgb(144, 238, 144): identical red and blue channels
- RGBA rgba(144, 238, 144, 1): adds alpha for tinted overlays and highlight fills
- HSL hsl(120, 73%, 75%): hue lands on exactly 120°
- HSB 120, 39, 93: the picker model, reporting saturation very differently
- CMYK 39, 0, 39, 7: equal cyan and yellow with no magenta
The symmetric CMYK reading confirms the pure-green position. Equal cyan and yellow with zero magenta is what a hue at exactly 120° looks like in the subtractive model.
HSL is what makes the green ramp manageable. Holding hue at 120° and stepping lightness generates the whole family, including the AA-compliant #487748 that the base can never be.
The HSL and HSB saturation gap deserves attention in handoff. HSL reports 73% and HSB reports 39% for the same color, so a number copied between the two produces a visibly different green.
Wrapping Up
Light green is a success surface rather than a success text color, and it’s one of four near-identical pale greens worth telling apart before a token set gets built. #90EE90 works for banner fills, status tags, and confirmation surfaces with near-black labels, #487748 handles anything read on white, #4FE34F carries dark mode at AAA, and an icon or a word should always accompany the hue so the state survives red-green color vision deficiency.
Those steps don’t need to be derived one at a time. Open Visily and use its AI-powered design tools to generate the light green tint and shade ladder, accessible success states, and matched accent pairings across the entire design in one pass.
