Skip to content
ColorPlum

Colors · value from the xkcd color survey (2010)

Neon blue color: hex code #04D9FF, RGB and palettes

Neon blue is #04D9FF (RGB 4, 217, 255), the xkcd survey value: a bright electric cyan. It glows on dark backgrounds, where it reaches 12.37:1 on black, but is only 1.69:1 on white.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchNeon bluemedium, saturated cyan
HEX
#04D9FF
RGB
rgb(4, 217, 255)
HSL
hsl(189, 100%, 51%)

Best text on it: black at 12.37:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Neon blue

  • HEX#04D9FF
  • RGBrgb(4, 217, 255)
  • HSLhsl(189, 100%, 51%)
  • HSV189°, 98%, 100%
  • CMYK98%, 15%, 0%, 0%
  • Lablab(79.5% -35.5 -31.7)
  • OKLCHoklch(81.6% 0.145 216.6)
  • Decimal317951

Tints, shades and tones

From white to black in 10% steps, with Neon blue in the middle. Tap a code to copy it.

  1. 90%#E6FBFF
  2. 80%#CDF7FF
  3. 70%#B4F4FF
  4. 60%#9BF0FF
  5. 50%#82ECFF
  6. 40%#68E8FF
  7. 30%#4FE4FF
  8. 20%#36E1FF
  9. 10%#1DDDFF
  10. Base#04D9FF
  11. 10%#04C3E6
  12. 20%#03AECC
  13. 30%#0398B3
  14. 40%#028299
  15. 50%#026D80
  16. 60%#025766
  17. 70%#01414D
  18. 80%#012B33
  19. 90%#00161A

Tones (mixed with gray)

  1. 10%#10D0F2
  2. 20%#1DC7E6
  3. 30%#29BED9
  4. 40%#36B5CC
  5. 50%#42ADC0
  6. 60%#4EA4B3
  7. 70%#5B9BA6
  8. 80%#679299
  9. 90%#74898D

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #005A6A
  • #009BB6
  • #04D9FF
  • #51E5FF
  • #9DF0FF

Neon blue in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Neon blue with its complement, its triad and its tint and shade
  • Neon blue
  • Triad #FF04D9
  • Triad #D9FF04
  • Complement
  • 50% tint
  • 50% shade

Neon blue in use

New collectionAutumn edit

Card body text stays dark for reading; neon blue carries the header and the button.

Shop nowTag

Headline in Neon blue

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#04D9FF
  • Protanopia (no red cones)#C0D2FF
  • Deuteranopia (no green cones)#A4BEFF
  • Tritanopia (no blue cones)#00E6E5

Contrast and readability

PairingRatioWCAG 2.2
as text on white1.69:1AA AA large AAA
as text on black12.37:1AA AA large AAA
white text on it1.69:1AA AA large AAA
black text on it12.37:1AA AA large AAA
on your background1.48:1AA AA large AAA

Export

:root {
  --neon-blue: #04d9ff;
  --neon-blue-rgb: 4 217 255;
  --neon-blue-on: #000000;
}
On this page

Neon blue borrows its name from glowing sign tubes, and the color most people picture is not a deep blue at all but a bright, electric cyan. There is no CSS keyword called neon blue, so the page shows #04D9FF, taken from the xkcd survey. In that survey, people were shown colors on their own screens and typed what they would call them.

The numbers

The RGB values are 4, 217, 255: practically no red, a lot of green and full blue. In HSL that is hue 189°, 100% saturation, 51% lightness, which explains the intensity. CMYK shows 98%, 15%, 0%, 0%, but screens can show a more vivid cyan than CMYK ink can print, so a printed version will look flatter. The decimal value is 317951.

Because it has so much green, the name "blue" is generous. Its nearest survey colors are "aqua blue" (#02D8E9, 3.2 away in OKLab) and "bright sky blue" (#02CCFE, 3.6). Among CSS colors the nearest are lightskyblue, darkturquoise and skyblue, all around 6.5 away, so no CSS name is close. If you need a CSS value, #04D9FF has to be written out as hex.

Where it is readable

This is a color for dark surfaces.

  • On black: 12.37:1, easily AAA. On a near-black navy such as #0A0A14 it measures 11.60:1.
  • On white: 1.69:1, which is unreadable for text and weak even for icons.
  • Text on it: black is the only sensible choice, since white on neon blue is 1.69:1.
  • Dark teal companions: the shade #012B33 under neon text gives 8.87:1, and the shade #026D80 with white text gives 5.99:1.

The complementary color is a hot red-orange, #FF2A04. Triadic partners are magenta #FF04D9 and a lime yellow, #D9FF04, the combination behind most "cyberpunk" palettes.

Worked example

You are designing the overlay for a game stream: a webcam frame, a recent-follower box and a chat strip. Use a dark navy panel (#0A0A14) and draw the webcam border in neon blue, then put the follower name in the same blue at 11.60:1. For the small "latest" label, white is easier on a dark panel, but because the blue is so bright, limit it to one glowing element per area. If you place text on a blue button instead, use the darker shade #025766 with white lettering, which reaches 8.21:1. Avoid putting white words directly on the pure neon blue, since they would fade.

For other glow colors see neon green and neon purple. A calmer blue is royal blue, and the color palette generator can build a full scheme around this cyan.

Sources

  1. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  2. xkcd, Color survey results (blog post by Randall Munroe, 2010; checked 2026-11-10) blog.xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org