Using Hot Pink in design
HEX
#FF69B4
RGB
255, 105, 180
HSL
330°, 100%, 71%
HSV
330°, 59%, 100%
High-wattage pink that behaves like a highlighter for emotion — loud, confident, and hard to mistake for a whisper. #FF69B4 pushes saturation the way a stage light pushes a performer forward. Use it when you want attention before typography even speaks.
Best for
Marketing websites, social media graphics, and campaign landing pages.
Compare with
Accessibility
Check contrast before using hot pink for text-heavy layouts, especially on low-contrast backgrounds.
How does hot pink compare to nearby colors?
What is the difference between hot pink and salmon pink?
Hot Pink (#FF69B4) bends more toward berry-magenta, while Salmon Pink (#FF91A4) carries more of a red-hot cast. Hot Pink and Salmon Pink can fill many of the same slots, but one steers the palette toward berry-magenta undertones and the other toward red-hot undertones. Start with hot pink when the palette wants more berry-magenta undertones; switch to salmon pink when the better fit is red-hot undertones.
What color is hot pink?
Hot pink became a staple of 1980s–1990s fashion and pop graphics and remains common in nightlife branding, youth marketing, and awareness campaigns.
What is the hex code for hot pink?
| Format | Value |
|---|---|
| HEX | #FF69B4 |
| RGB | rgb(255, 105, 180) |
| HSL | hsl(330°, 100%, 71%) |
| HSV / HSB | hsv(330°, 59%, 100%) |
| CMYK (approx.) | cmyk(0%, 59%, 29%, 0%) |
Convert Hot Pink to other color formats
Open the color converter with Hot Pink (#FF69B4) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Hot Pink in the color converter →What does hot pink mean in design?
Hot pink is often associated with bold femininity, celebration, and unapologetic visibility. Versus standard pink it feels neon-forward; versus millennial pink it is far more saturated and less "filtered."
How do I use hot pink in code?
| CSS (hex) | color: #FF69B4; |
| CSS (rgb) | color: rgb(255, 105, 180); |
| CSS (hsl) | color: hsl(330, 100%, 71%); |
| RGB % | rgb(100%, 41%, 71%) |
| Tailwind | text-[#FF69B4] |
| SwiftUI | Color(red: 1.000, green: 0.412, blue: 0.706) |
| UIKit | UIColor(red: 1.000, green: 0.412, blue: 0.706, alpha: 1.0) |
| Android | Color.rgb(255, 105, 180) |
| Compose | Color(0xFFFF69B4) |
| Web Safe | #FF66CC |
Is hot pink accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 2.65:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaBlack text on this color | 7.93:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on white | 2.65:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on black | 7.93:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does hot pink look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with hot pink
Charcoal lets hot pink stay light and atmospheric while still giving the layout a readable dark value for text and hierarchy.
Because hot pink already carries warmth, navy blue gives the pair a steadier backbone and keeps it closer to packaging and campaign work than to one-note seasonal color.
With a vivid hot pink, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
White gives hot pink enough open space that the color can feel vivid without turning the whole palette noisy.
Sage Green helps hot pink feel more complete in practice because the pairing combines powder blush qualities with sage and moss support instead of leaving the source color to do every job alone.
What colors clash with hot pink
Neon Green changes the meaning of hot pink too abruptly, replacing the source color's beauty packaging, weddings, and soft UI cues with something much louder and less stable.
With hot pink, magenta introduces a second emotional story instead of reinforcing the first one, so the palette can feel internally split.
How should I use hot pink in design?
- •Use hot pink for buttons, badges, and chart accents where it can stand out. Test text contrast with WCAG tools before using it for body copy on light backgrounds.
- •Pair hot pink with cool accents (navy, sage, steel blue) for sharp contrast, or keep it with other warm tones (cream, gold, tan) for a cohesive, editorial feel.
- •Vivid colors like hot pink work best as punctuation in a layout: CTAs, key metrics, or a single hero element. Surrounding neutrals keep it from fatiguing the viewer.
What are good hot pink palettes?
Morning palette
Marketing websites, social media graphics, and campaign landing pages.
Design with hot pink in Moda
Create a presentation or document using hot pink as your accent color. Moda's AI applies your color palette automatically.
Create a design with hot pink →What are the shades and tints of hot pink?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for hot pink?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Flamingo
Flamingo is almost the same hue as hot pink; the real difference is value, with flamingo feeling more open and surface-friendly.
Salmon Pink
Salmon Pink keeps roughly the same visual weight as hot pink but changes the undertone story, which is often enough to move a palette from warmer and tactile to cooler and more technical, or the reverse.
Carnation
Carnation is close enough to hot pink to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Coral Pink
Coral Pink keeps some overlap with hot pink, but the shift in finish and association is enough to make one feel better suited to this particular layout than the other.
Blush
Blush tracks close to hot pink in hue, but the value shift changes where each one earns its place: blush is easier to use for backgrounds, tints, and softer supporting areas, while hot pink holds onto accents, stronger hierarchy, and firmer structure.
Frequently asked questions
What is the hex code for hot pink?
The hex code for hot pink is #FF69B4. In RGB, that's 255 red, 105 green, and 180 blue. The approximate CMYK equivalent is 0% cyan, 59% magenta, 29% yellow, and 0% key (black).
Is hot pink a warm or cool color?
Hot Pink reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.
Is hot pink better as an accent or a full-palette color?
Hot Pink is usually best when it leads in short bursts rather than covering everything. It can headline a palette, but most layouts work better when the color handles accents, highlights, or one main hero role instead of every surface.
How should I use hot pink in a design?
Hot Pink works as a soft background or supporting color for slide canvases, section panels, and marketing surfaces. Use dark text for readability and reserve stronger accents for buttons, charts, and key takeaways.
Can I use hot pink for text or backgrounds?
Hot Pink works better with dark text than white text. Black text reaches 7.93:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More pink colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Pink colors
Compare hot pink with other pink tones.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Orange colors
Explore nearby color families to build stronger palettes and contrasts.
Purple colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.