Neon green carries the hex code #39FF14, which resolves to rgb(57, 255, 20) and hsl(111, 100%, 54%). Green sits at maximum with a small amount of red and almost no blue, which places the hue at 111° and pushes it slightly toward yellow from pure green.
Neon green reaches 1.36:1 against white, one of the lowest ratios of any saturated color, and 15.49:1 against black. This page covers every code format, the computed palettes, the four elements where it performs, and why no display can actually produce the fluorescent effect the name promises.
What Is the Color Neon Green?
Neon green sits at 111° with 100% saturation and 54% lightness. No CSS keyword maps to it, and #39FF14 is the value most references publish for the fluorescent green associated with safety vests and highlighter ink.
The full code set for #39FF14:
- HEX: #39FF14
- RGB: rgb(57, 255, 20)
- RGBA: rgba(57, 255, 20, 1)
- HSL: hsl(111, 100%, 54%)
- HSB: 111, 92, 100
- CMYK: 78, 0, 92, 0
The hue at 111° rather than 120° is what separates it from pure green. That nine-degree shift toward yellow is small in numbers and significant in perception, since it lands the color in the region the eye is most sensitive to.
Peak human luminance sensitivity sits near 555 nanometers, in the yellow-green band. Neon green is engineered to sit close to that peak, which is exactly why it appears to glow and exactly why its contrast against white collapses.
Why Can’t a Screen Produce Real Neon?
Fluorescent materials absorb ultraviolet light and re-emit it in the visible band, so a real safety vest returns more visible light than falls on it. No display can do that, since a screen’s output is capped by its backlight or its emitters.
Three consequences follow:
- Neon on screen is a relative effect: the color reads bright because everything around it is darker
- The illusion collapses on white: with a bright surround, no color can appear to glow
- Dark surroundings restore it: the same hex on near-black reads as genuinely luminous
Anyone who has designed a neon accent on a white artboard and then seen it on a dark theme has met this directly. The color is identical and the perception isn’t.
By contrast, a printed fluorescent ink genuinely does emit extra light, which is why a highlighter looks different from a screen swatch of the same hex. The screen version is an approximation of a physical effect it can’t reproduce.
The practical rule follows. Neon green belongs on dark surfaces where the relative-luminance effect works, and treating it as a light-mode accent produces a color that fails contrast and looks flat at the same time.
How Does Neon Green Appear on Digital Screens?
Neon green renders at close to maximum green output on every panel. Wide-gamut displays push it considerably further than sRGB, so a P3 screen shows a version noticeably more intense than the design file suggested.
The measured values set the constraints:
- #39FF14 on white: 1.36:1, fails everything
- #39FF14 on black: 15.49:1, passes AAA
- Black text on #39FF14: 15.49:1, passes AAA
- White text on #39FF14: 1.36:1, fails everything
- Dark variant #2BBF0F on white: 2.45:1, still fails AA
Green’s luminance weighting drives all of it. Relative luminance counts green at 71.52%, and a color engineered to sit near the eye’s sensitivity peak inherits nearly all of that weight.
Darkening helps less than expected. #2BBF0F reaches only 2.45:1, so even a substantially deeper neon green fails as text on white.
The shade at #1C800A reaches 5.6:1 and passes AA, though at that point the color reads as a standard dark green rather than as neon. Legibility and the neon character are mutually exclusive on a light background.
What Are the Shades of Neon Green?
Shades come from mixing black into #39FF14 while holding hue at 111°:
- #32DF12
- #2BBF0F
- #249F0C
- #1C800A
- #156008
- #0E4005
- #072002
The neon quality disappears fast down this ramp. By #249F0C the color reads as an ordinary green, which is worth knowing before a design system tries to build a neon scale.
Tints run toward white through #4CFF2C, #60FF44, #75FF5D, #8AFF75, #9EFF8D, #B3FFA6, #C8FFBE, and #DCFFD6. Those pale steps lose the neon character in the other direction, becoming a mint family rather than a fluorescent one.
Named neighbors sit in the bright green region:
- Lime (#00FF00): the CSS keyword at pure green, 1.37:1 on white
- Chartreuse (#7FFF00): shifted further toward yellow, 1.28:1
- Green yellow (#ADFF2F): more yellow again, 1.24:1
- Spring green (#00FF7F): shifted toward cyan, 1.44:1
- Lime green (#32CD32): noticeably darker, 2.06:1
What UI Elements Work Best with Neon Green?
Neon green belongs on dark surfaces and on light surfaces that host dark content. The 15.49:1 for black text on it opens a narrow role, and the 1.36:1 against white closes most others.
Text, icons on light backgrounds, functional borders, and any control with a white label all fall outside its range. Four element types remain where neon green genuinely performs.
Dark Mode Accents and Terminal Interfaces
Dark surfaces are where neon green does its real work. The bright variant #52FF33 on the computed surface #0F1D0C reaches 13.08:1 and clears AAA, so it carries links, icons, and small labels.
Developer tooling has used this pairing for decades. Terminal output, syntax highlighting, log viewers, and monitoring dashboards all rely on bright green against near-black because the combination is both legible and instantly readable as system output.
Saturation should still come down for extended reading. Full-intensity neon against near-black causes visible afterimages in long sessions, and stepping down the tint ramp reduces that without losing the character.
Highlight and Emphasis Fills
Highlighting suits neon green precisely because of its luminance. A #39FF14 background behind dark text keeps that text at 15.49:1, so the emphasis costs nothing in legibility.
Search matches, active filters, and live indicators all fit. The color pulls the eye faster than any other fill in this cluster, which is the entire point of a highlight.
Restraint matters more here than for any color on this page. Two neon highlights on one screen cancel each other, and a third makes the interface unusable.
Status Badges with Dark Labels
Badges work when the label sits at near-black. Live, active, online, and recording all suit a color that reads as energised rather than calm.
A solid #39FF14 fill with #072002 text is fully accessible at any size. White labels on the same fill fail at 1.36:1, which is the most common mistake with any bright green.
Neon green also separates from a conventional success green. Using #228B22 for success and #39FF14 for live gives two green states that don’t collide.
Data Visualizations
Charts use neon green for the outlier, the live series, or the threshold marker rather than as a general category color. Its intensity means it dominates whatever else is in the plot.
Dark plot backgrounds suit it best. Against white the color reads as washed and fails as a line, and against near-black it reads clearly at 2px.
Red-green color vision deficiency is the constraint in charts specifically. Neon green shifts toward a pale yellow under deuteranopia, so a direct label or a pattern has to carry the meaning.
What Are the Best Neon Green Color Palettes for UI?
Every palette below comes from rotating hue around #39FF14 at fixed saturation and lightness, so each scheme is computed rather than curated.
Monochromatic
The monochromatic scheme holds hue at 111° and moves lightness: #39FF14, #19A500, and #95FF82. The dark step gives the palette a usable accent.
#19A500 reaches 3.4:1 on white and covers large text and non-text elements. Mapping places it on interactive elements, the base on dark-mode accents, and #95FF82 on light fills.
Analogous
Analogous pulls neighbors 30° in each direction: #39FF14, #14FF66, and #ADFF14. A spring green and a chartreuse flanking the base, all at full saturation.
All three fail on white and all three work on near-black. This is a dark-theme palette rather than a general one.
Complementary
Neon green’s complement sits opposite at 291°: #39FF14 paired with #DC14FF, a vivid purple-magenta. Maximum hue tension between two colors with very different luminance.
The magenta reaches 3.6:1 on white and passes for large text, so it can do the light-mode work neon green can’t. That division of labor makes this the most practical of the five.
Triadic
The triadic scheme gives you #39FF14, #1437FF, and #FF1437: neon green, a vivid blue, and a vivid red. Three saturated hues at matched lightness, which suits a dark-background categorical chart.
The blue at #1437FF reaches 8.1:1 on white and passes AAA. Anyone needing one member of this set to carry text has it.
Split-Complementary
Split-complementary softens the pairing: #39FF14, #6614FF, and #FF14AD. Neon green with a violet and a hot pink, and the most flexible of the five for a dark interface.
The violet at #6614FF supplies the interactive layer at 8.9:1 on white. Visily’s theme tools can generate the tint and shade ladder for each value so hover and active states come out accessible rather than hand-mixed.
Which Colors Are Similar to Neon Green?
Five named colors sit close enough to #39FF14 to substitute for it, and all fail on white:
- Lime (#00FF00): the CSS keyword at pure green, 1.37:1
- Chartreuse (#7FFF00): further toward yellow, 1.28:1
- Green yellow (#ADFF2F): more yellow again, 1.24:1
- Spring green (#00FF7F): shifted toward cyan, 1.44:1
- Lime green (#32CD32): the darkest of the group, 2.06:1
Lime green is the practical substitution when a bright green needs slightly more presence on a light background. At 2.06:1 it still fails, and it survives compression and dim screens better than the base.
Lime at #00FF00 is worth distinguishing carefully. It sits at pure green rather than at 111°, so it reads marginally less fluorescent while measuring almost identically.
Which Colors Pair Best with Neon Green?
Near-black is neon green’s essential partner, and more so than for any other color here. The relative-luminance effect that makes it read as glowing requires a dark surround.
Deep green from the shade ramp supplies the light-mode layer. #1C800A shares the base’s hue, passes AA on white at 5.6:1, and gives the palette a text color.
Vivid purple from the complementary direction balances it. #DC14FF clears 3:1 on white and provides the light-mode accent neon green can’t.
Charcoal and graphite make it look engineered rather than novelty. A near-black with a slight blue cast reads as technical, which suits the developer and monitoring contexts where neon green belongs.
The 60-30-10 split applies as follows:
- 60% near-black: dark surfaces where the color can work
- 30% neutral: off-white text, borders, and raised surfaces
- 10% neon green: live indicators, highlights, and the one thing that matters
Neon green rarely earns even 10%. Its pull is strong enough that a smaller share usually does the job.
Which Colors Should You Avoid Pairing with Neon Green?
White fails hardest. At 1.36:1 the color has no perceptible boundary on white, so borders and outlines built that way vanish entirely.
Two computed near-clashes cause the next problem: #14FF53 and #99FF14. Both sit 25° away at identical lightness, offering hue difference with no luminance difference.
Yellow is the perceptual trap. Neon green and yellow both sit near the top of the luminance scale, so the two produce near-equal brightnesses that the eye can’t cleanly separate.
Conventional success green is the semantic problem. Placing #228B22 and #39FF14 near each other without a clear role for each teaches users nothing about which state is which.
Does Neon Green Meet Accessibility Standards?
Neon green fails WCAG requirements against white in every category. The 1.36:1 measurement sits far below the 4.5:1 body-text threshold and the 3:1 non-text floor set by the W3C.
Neon green lands as follows across the common pairings:
- #39FF14 on white: 1.36:1, fails AA and the 3:1 non-text floor
- White on #39FF14: 1.36:1, fails
- Black on #39FF14: 15.49:1, passes AAA
- #1C800A on white: 5.6:1, passes AA
- #52FF33 on #0F1D0C: 13.08:1, passes AAA
Beyond contrast, neon green raises a comfort question the ratios don’t capture. High-luminance saturated colors across large areas cause visual fatigue and afterimages, so a full-screen neon surface is a poor choice even where it technically passes.
Red-green color vision deficiency applies forcefully. Under deuteranopia and protanopia neon green shifts toward a pale yellow and converges with yellows and light oranges.
A second cue must always accompany the hue. An icon, a label, or a position preserves the meaning when the color collapses, and this matters more for a green used as a live indicator than for almost any other signal.
How Can You Convert Neon Green Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same green from a different angle:
- HEX #39FF14: the default in design files and CSS
- RGB rgb(57, 255, 20): green at maximum with small red and blue values
- RGBA rgba(57, 255, 20, 1): adds alpha for highlight fills and overlays
- HSL hsl(111, 100%, 54%): hue sits nine degrees short of pure green
- HSB 111, 92, 100: the picker model, reporting saturation at 92%
- CMYK 78, 0, 92, 0: heavy cyan and yellow with no magenta
CMYK is where the neon promise breaks completely. The 78, 0, 92, 0 mix produces an ordinary bright green in process ink, and a genuinely fluorescent print result requires a specialty ink outside the standard four.
HSL makes the ramp predictable. Holding hue at 111° and stepping lightness generates the whole family, including the AA-compliant #1C800A that the base can never be.
The nine-degree offset from pure green is worth preserving through conversions. Rounding it to 120° produces lime, which measures almost identically and reads slightly less fluorescent, so the small number carries real information.
Wrapping Up
Neon green is a dark-surface color whose defining quality is an illusion no screen can produce on white. #39FF14 works for dark-mode accents, highlight fills, and badges with near-black labels, #52FF33 carries links and small text on near-black at AAA, and #1C800A is the only value in the family that reads on a light background, at the cost of the neon character entirely.
Those steps don’t need to be derived by hand. Open Visily and use its AI-powered design tools to generate the neon green tint and shade ladder, accessible dark-theme accents, and matched pairings across the entire design in one pass.
