Neon pink blends pink and purple in an electrifying shade, evoking the fluorescent glow of neon lights. This shade has bright, vibrant qualities with an energetic feel that draws the eye.
Neon pink is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #FF13F0
- RGB value: 100% red, 7.5% green, and 94.1% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use neon pink in your designs:
- Create an energetic interface. Neon pink evokes excitement, so incorporating it into your design creates a stimulating and engaging atmosphere.
- Establish visual hierarchy. Like a neon light, neon pink can draw the eye and emphasize important elements. Using neon pink for CTAs or highlighting new features can draw attention and create a sense of urgency.
- Provide clear visual feedback. Neon pink can signal receipt of user input or task completion. Changing a text box border from white to neon pink can immediately confirm user input. A neon pink checkmark after a successful user action can also be a distinct reinforcement.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
To complement neon pink, consider pairing it with:
- Neon green (#2CFF05) complements neon pink’s brightness, but use this combo sparingly to reduce eye strain.
- Mint blue (#98FBCB) boosts neon pink’s cooler undertones to create a calmer yet vibrant palette.
- Mauve (#E0AFFF) refines neon pink’s electricity with a soothing air.
Other colors worth considering include aqua to enhance neon pink’s vibrance, burgundy for a sophisticated aesthetic, and jade green for a bright floral palette.
While neon pink is bold, it may clash with:
- Lavender (#D3D3FF) conflicts with neon pink’s high saturation and red undertones.
- Peach (#FFD3AC) blunts neon pink’s energy with low saturation and orange undertones.
- Cyan (#00FFFF) creates a jarring contrast with its bright, cool tones.
- Lilac (#A47DAB) pales next to neon pink with its low saturation and stronger purple undertones.
Neon pink symbolizes boldness, confidence, and excitement. Neon pink often connotes individuality and the vibrance of the digital era, but it can also represent rebellion against conformity.
In color psychology, neon pink is stimulating, exciting, and eye-catching. In large amounts, its energizing nature can overwhelm, creating a sense of urgency.
In UI design, neon pink effectively indicates important information, making it useful for CTAs, non-urgent error messages, and time-sensitive offers. It works well to create bold, modern interfaces, but use it sparingly as an accent to avoid eye strain.
Neon pink is a relatively new color, originating from the early 1900s when Georges Claude invented neon lights. The adjective “neon” has since come to refer to various bright, vibrant colors.
The 1980s welcomed bright colors like neon pink in vivid, eye-catching fashion palettes as a rebellion against muted tones., Ultra-bright neon pink has remained popular in nightclub and festival cultures — its glow effect pairs well with high-energy environments.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Neon Whim
Hyper Flora
Disco
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
3.18:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
6.6:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FF13F0, known as neon pink, has RGB values of R:255 G:19, B:240 and CMYK values of C:0, M:0.93, Y:0.06, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | FF13F0 | #FF13F0 |
| RGB DECIMAL | 255, 19, 240 | RGB(255,19,240) |
| RGB PERCENTAGE | 100, 7.5, 94.1 | RGB(100%,7.5%,94.1%) |
| CMYK | 0, 93, 6, 0 | |
| HSL | 303.8°, 100, 53.7 | HSL(303.8°,100%,53.7%) |
| HSV (OR HSB) | 303.8°, 92.5, 100 | |
| WEB SAFE | FF00FF | #FF00FF |
| CIE-LAB | 59.908, 94.95, -53.156 | |
| XYZ | 57.2, 28.021, 84.829 | |
| xyY | 0.336, 0.165, 28.021 | |
| CIE-LCH | 59.908, 108.817, 330.759 | |
| CIE-LUV | 59.908, 89.349, -96.428 | |
| HUNTER-LAB | 52.935, 100.246, -57.958 | |
| BINARY | 11111111, 00010011, 11110000 | |
| iOS - SwiftUI | Color(red: 1, green: 0.075, blue: 0.941) | |
| iOS - UIKit | UIColor(red: 1, green: 0.075, blue: 0.941, alpha: 1) | |
| Android - Compose | Color(0xFFFF13F0) |
