↑ ↓ to moveEnter to openEsc to close

Neon colors

Neon colors push screens to the edge of their range: hot pinks, acid greens, electric blues. Use them as accents, and check contrast before putting text on them.

Classic neon colors

Near the edge of what an sRGB screen can show.

  • Aa 14.56:1
    Liquid Neon #C8FF00 RGB 200, 255, 0
  • Aa 12.56:1
    Fluorescent Green #08FF08 RGB 8, 255, 8
  • Aa 10.16:1
    Overgrown #88DD00 RGB 136, 221, 0
  • Aa 9.42:1
    Green Priestess #11DD55 RGB 17, 221, 85
  • Aa 6.73:1
    Candy Pink #FF63E9 RGB 255, 99, 233
  • Aa 5.59:1
    Flaming Flamingo #DD55FF RGB 221, 85, 255
  • Aa 6.72:1
    Lush Plains #22BB22 RGB 34, 187, 34
  • Aa 5.02:1
    Hot Magenta #FF00CC RGB 255, 0, 204
  • Aa 4.56:1
    Neon Rose #FF0080 RGB 255, 0, 128
  • Aa 4.43:1
    Flaming Hot Flamingoes #FF005D RGB 255, 0, 93
  • Aa 4.26:1
    Drunk-Tank Pink #DD11DD RGB 221, 17, 221
  • Aa 4.41:1
    Thai Hot #FE1C06 RGB 254, 28, 6
  • Aa 4.38:1
    Neon Red #FF073A RGB 255, 7, 58
  • Aa 4.40:1
    Orion Nebula #A55AF4 RGB 165, 90, 244
  • Aa 4.50:1
    Neon Purple #BC13FE RGB 188, 19, 254

Named neons

Shades with "neon" or "fluorescent" in the name.

  • Aa 13.52:1
    Fluorescent Turquoise #00FDFF RGB 0, 253, 255
  • Aa 13.59:1
    Neon Lime #95FF00 RGB 149, 255, 0
  • Aa 11.62:1
    Fluorescent Orange #FFCF00 RGB 255, 207, 0
  • Aa 12.57:1
    Cyber Neon Green #00FF26 RGB 0, 255, 38
  • Aa 8.96:1
    Fluorescent Lime #BDC233 RGB 189, 194, 51
  • Aa 8.02:1
    Neon Carrot #FF9832 RGB 255, 152, 50
  • Aa 6.81:1
    Nervous Neon Pink #FF6EC7 RGB 255, 110, 199
  • Aa 6.94:1
    Fluorescent Red Orange #FC8427 RGB 252, 132, 39
  • Aa 6.15:1
    Neon Sunset #FF629F RGB 255, 98, 159
  • Aa 5.55:1
    Fresh Neon Pink #FF11FF RGB 255, 17, 255
  • Aa 5.48:1
    Fluorescent Red #FF5555 RGB 255, 85, 85
  • Aa 4.66:1
    Neon Pink #FE019A RGB 254, 1, 154
  • Aa 4.71:1
    Office Neon Light #FF2277 RGB 255, 34, 119
  • Aa 4.41:1
    Red Light Neon #FF0055 RGB 255, 0, 85
  • Aa 4.63:1
    Neon Romance #E9023A RGB 233, 2, 58
  • Aa 5.08:1
    Shady Neon Blue #5555FF RGB 85, 85, 255

Palette idea: light to dark

  • LightestAa 14.56:1
    Liquid Neon #C8FF00 RGB 200, 255, 0
  • LightAa 9.42:1
    Green Priestess #11DD55 RGB 17, 221, 85
  • MidAa 5.59:1
    Flaming Flamingo #DD55FF RGB 221, 85, 255
  • DeepAa 4.41:1
    Red Light Neon #FF0055 RGB 255, 0, 85
  • DarkestAa 5.08:1
    Shady Neon Blue #5555FF RGB 85, 85, 255

Palette idea: with neutrals

  • BackgroundAa 16.11:1
    Warm white #FAF7F2 RGB 250, 247, 242
  • SurfaceAa 12.56:1
    Fluorescent Green #08FF08 RGB 8, 255, 8
  • MainAa 5.59:1
    Flaming Flamingo #DD55FF RGB 221, 85, 255
  • DeepAa 4.38:1
    Neon Red #FF073A RGB 255, 7, 58
  • TextAa 16.81:1
    Ink #1F1D1A RGB 31, 29, 26

Palette idea: complementary accent

  • LightAa 11.62:1
    Fluorescent Orange #FFCF00 RGB 255, 207, 0
  • MainAa 5.59:1
    Flaming Flamingo #DD55FF RGB 221, 85, 255
  • DarkAa 4.40:1
    Orion Nebula #A55AF4 RGB 165, 90, 244
  • AccentAa 6.70:1
    Complement #69B353 RGB 105, 179, 83
  • BaseAa 15.53:1
    Off-white #F5F3EE RGB 245, 243, 238

Why neon is hard on screens

Real neon signs and fluorescent paint emit or reflect more light than ordinary colors, so they seem to glow. A screen can't exceed its own maximum, so "neon" on screen means colors right at the edge of the display's range: very high saturation with fairly high lightness. On wide-gamut phones and laptops, some of these swatches look even more intense than on an older monitor.

Using neon without overload

  • Keep neon to small areas: a highlight, a logo, a single call-to-action.
  • Put it on a dark background; black, charcoal or deep navy make neon look like light.
  • Pair at most two neons, ideally far apart on the color wheel, such as pink and green.
  • Avoid long text in neon colors. Eyes tire quickly, and contrast with white is poor.

Neon in print

Standard CMYK printing cannot reproduce neon colors. Printers use special fluorescent inks or spot colors instead. If a design must print, choose the closest printable alternatives and accept that they will look duller.

Glow effects

A soft glow helps sell the effect online: text-shadow: 0 0 8px currentColor around neon text on a dark background mimics a sign.

Explore bright colors for vivid but slightly calmer shades, lime green for acid greens, and check readability with the contrast checker.