Neon Colors Hex Codes: Green, Pink, Yellow, Blue and 9 More (2026)

The most used neon color hex codes are neon green #39FF14, neon pink #FF10F0, neon yellow #FFF01F, neon orange #FF5F1F, neon blue #1F51FF and neon red #FF3131. Neon is a look rather than a standard, so these are common picks, not official values. This guide lists 13 neon shades with RGB and HSL, tested text contrast, what happens to them in print, five palettes and prompts for neon AI images. All figures are as of 5 November 2026.

What are the hex codes for neon colors?

Here is the quick reference. The hex values follow the neon chart from Made Good Designs, which says plainly that its values are its own choices. The RGB and HSL columns are converted directly from each hex code, so paste whichever format your tool wants.

Hex codes are not case sensitive, so #39ff14 and #39FF14 are the same color.

Why do sites list different neon codes?

Nobody owns the word. CSS has named colors such as lime, cyan and magenta, but none called neon, so every chart picks its own values. HTML Color Codes also gives #FF3131 for neon red, which matches the table above, while other palettes shift a few points either way. Neon green shows up as both #39FF14 and #36FF13, for example, and you could not tell those apart by eye.

None of them is wrong. If a brand or project needs one exact neon, pick it once, write it down and stop relying on the name.

What makes a color neon?

On a screen, neon comes down to two numbers. Look at the HSL column above and a clear pattern shows up:

• Saturation is 98% to 100% on all 13 colors. There is almost no gray in them.
• Lightness sits between 50% and 62%. Go much higher and the color drifts toward a pastel. Go lower and it starts to look deep rather than bright.
• One RGB channel is at or near full power. Every color has a channel of 252 or higher, and its weakest channel is 61 or lower.

The pattern works in reverse too, which is handy for a brand color.

How do you turn any color into a neon?

Keep the hue, then push saturation to 100% and set lightness to around 55%:

1. Convert your color to HSL. Muted teal #2A9D8F is about hsl(173, 58%, 39%).
2. Raise saturation to 100%.
3. Raise lightness to 50–60%. At 55% you get hsl(173, 100%, 55%).
4. Convert back to hex, which here gives #1AFFE4.

The result stays related to the original color, so it feels like a louder version of your brand rather than a generic neon from a list.

Are neon signs the same as neon colors?

Not really. Real neon gas gives an orange light, and the other colors you see in "neon" signs come from other gases and fluorescent coatings. Blue, for instance, can come from mercury mixed in with the gas. So the bright pinks and blues people call neon are mostly not neon at all, and the name now just means very bright and very saturated.

Why does neon look different on screen and in print?

A screen makes its own light and a printed page only reflects it. That is the whole problem. Neon hex codes work on a monitor because the display can drive one channel to full power. Paper can only send back part of the light that hits it, and the four process inks cannot reach those colors.

Made Good Designs estimates what each neon turns into on a coated offset press. Its figures are approximations, but the size of the drop is the useful part. ΔE is a measure of how far apart two colors look, and higher means a bigger change.

Lime, green and yellow lose the most, while red and orange survive best. If a neon green logo has to go on a flyer, expect a pale sage unless you pay for something else.

How do you print real neon?

Ask for a fluorescent spot ink, which is a separate premixed ink rather than a blend of the four process colors. Some digital presses offer fluorescent toners as well. These inks work differently from normal ones. Fluorescent materials absorb light at a shorter wavelength and emit it at a longer one, which is why their colors can look bright and intensified. Extra inks usually cost more, so get a quote and a physical proof before a large order.

Can a screen show brighter neon than a hex code?

Yes, on many newer displays. Hex codes describe sRGB colors. CSS can reach beyond that with the color() function and the Display P3 color space, and a wide-gamut screen will show a more intense green than #00FF00 can. Give a hex fallback first:

cssCopy
.accent {
  color: #39FF14;
  color: color(display-p3 0.3 1 0.2);
}

Browsers that do not support the second line ignore it and use the first.

Can you use neon colors for text?

Sometimes, and it depends on the background far more than the color. We calculated the WCAG contrast ratio of every color in the first table. WCAG level AA asks for 4.5:1 on normal text and 3:1 on large text, meaning at least 18pt, or 14pt bold.

What this means in practice:

• On near-black, 10 of the 13 pass for normal text. Neon purple, electric violet and neon blue miss 4.5:1 but still clear 3:1, so keep them for headings and large labels.
• On white, only three pass: neon purple (just), electric violet and neon blue. Orange, red, pink and magenta only work at large sizes. The other six fail completely.
• As a button fill, black text is usually the right call. It clears 4.5:1 on 11 of the 13. White text is the better choice on electric violet and neon blue.
• Two neons together are hard to read. Neon red on neon blue is only 1.56:1, neon pink on neon cyan is 1.88:1, and neon pink on neon green is 2.35:1. They look loud, but they fail even the large-text minimum, so do not set one as text on the other.

The simple rule: use neon as an accent on a dark background, and keep long body text in a light neutral.

What colors go with neon?

Dark neutrals, first of all. Neon reads as bright because of what surrounds it, so black, charcoal and deep navy do more for a neon than any second neon can. Good partners:

• Near-black or deep navy: the classic base. It gives the strongest glow effect and the best text contrast.
• Charcoal and mid-gray: calmer, and better for a product or corporate design.
• White: works for a sporty, clean look, but only with the darker neons, or with neon as a shape rather than as text.
• One opposite neon: pink with cyan or orange with blue. Two is usually plenty.

What are good neon color palettes?

These five are built from the codes above. Each one uses a dark base so the neons have something to stand out against.

For a real layout, flip the usual 60-30-10 rule of thumb. Give the dark base most of the space, a neutral the next share, and neon only the last 10% or so. A design that is all neon has no focal point, and it tires the eye fast.

How do you make a neon glow in CSS?

Stack a few shadows of the same color at growing sizes:

cssCopy
.neon-text {
  color: #FFFFFF;
  text-shadow:
    0 0 4px #FF10F0,
    0 0 12px #FF10F0,
    0 0 32px #FF10F0;
}

A white or very pale core with a colored halo looks closer to a lit tube than solid neon text does. Keep it to headings and logos, since blurred halos make small text harder to read.

How do you get neon colors in AI images?

Describe a light source, not just a color. Image models read a prompt as language, so "neon sign reflected on wet pavement" gets you further than a hex code alone. Add codes as a hint if you like, but check the result with an eyedropper tool when the exact value matters.

Four prompts you can copy:

• City scene: "Narrow city alley at night in the rain, glowing pink #FF10F0 and cyan #04D9FF neon signs, reflections on wet pavement, deep shadows, cinematic photo, high contrast."
• Poster: "Retro synthwave poster, a sun made of glowing magenta and orange stripes above a dark grid horizon, purple haze, bold and clean shapes, near-black sky."
• Product: "Studio photo of white sneakers on a black reflective surface, lit from the side by neon pink and electric blue tube lights, sharp focus, light haze."
• Lettering: "A bent glass neon sign that reads OPEN, bright green #39FF14 tubes, mounted on a dark brick wall, soft halo on the bricks, photo."

A few words do most of the work: neon, glowing, tube lights, night, wet reflections, dark background, high contrast. Words that pull the other way include pastel, muted, soft, daylight and matte. Say what you want rather than what to avoid, because not every model has a negative prompt. Seedream 5.0 Flash on Kenerate, for example, does not.

If your prompt is short, run it through the AI prompt enhancer to add lighting and style detail.

Which Kenerate tools help with neon images?

Both Seedream 5.0 models accept up to 10 reference images for edits, which helps a set of pictures keep the same palette. Upload your first good result as a reference for the next one.

Where do neon colors work best?

Neon suits anything that has to grab attention fast, and it suits dark settings best. Quick guidance:

• Web and apps: buttons, highlights, active states and chart accents on a dark theme, never whole pages.
• Social posts: one neon headline on a dark image stands out in a feed. Check it at phone size.
• Print: treat the hex code as a target you will miss. Budget for a fluorescent spot ink, or redesign around the duller result.
• Logos: test a one-color dark version too, because a neon-only logo falls apart on white.
• Data charts: save neon for the one series that matters and keep the rest gray.

For calmer designs, see our pastel colors hex codes guide, which covers the opposite end of the same scale.