Hot pink carries the hex code #FF69B4, which resolves to rgb(255, 105, 180) and hsl(330, 100%, 71%). It sits at 330° on the color wheel, between red and magenta, with the red channel maxed and blue running well ahead of green.
Hot pink reaches 2.65:1 against white and 7.93:1 against black, which makes it a dark-background color that most teams reach for in light mode. You’ll get every code format, the computed palettes, the four elements where it performs, and the shade you need when hot pink has to carry text.
What Is the Color Hot Pink?
Hot pink is a high-saturation pink defined by the CSS keyword hotpink, which maps to #FF69B4 exactly. Lightness reads 71%, notably higher than red’s 50%, and that extra lightness is what separates it from the deeper pinks like deep pink and cerise.
The full code set for #FF69B4:
- HEX: #FF69B4
- RGB: rgb(255, 105, 180)
- RGBA: rgba(255, 105, 180, 1)
- HSL: hsl(330, 100%, 71%)
- HSB: 330, 59, 100
- CMYK: 0, 59, 29, 0
The HSB reading is the interesting one. Saturation reads 59% in the brightness model while HSL reports 100%, and that gap is why hot pink looks vivid without looking as dense as a pure primary.
Design tools disagree on the value. Figma’s reference lists hot pink as #FF46A2, a deeper and more saturated take, so pin your token to a hex rather than a name before it drifts across files.
What Is Another Name for Hot Pink?
Hot pink travels under several names, and most of them point at different hex values rather than the same one. Getting this wrong is how a brand color ends up two steps off between design and code.
Here’s what each name actually refers to:
- Hot pink: the CSS keyword, #FF69B4
- Deep pink: a separate CSS keyword at #FF1493, darker and more saturated
- Fuchsia / magenta: both CSS keywords for #FF00FF, the pure secondary
- Shocking pink: the historical Schiaparelli color, close to #FC0FC0
- Cerise: #DE3163, pulled toward red and considerably darker
Fuchsia and magenta are the same value under two names, which trips up teams that assume one is warmer. They’re identical in sRGB.
Shocking pink carries the design history. Elsa Schiaparelli introduced it in 1937, and the modern web color descends from that lineage rather than the other way around.
How Does Hot Pink Appear on Digital Screens?
Hot pink renders vividly on every panel because it drives red at full output with substantial blue behind it. That combination sits near the edge of the sRGB gamut, so it can clip or shift on displays with narrow color coverage.
The contrast numbers explain the practical constraints:
- #FF69B4 on white: 2.65:1, fails AA and the 3:1 non-text floor
- #FF69B4 on black: 7.93:1, passes AAA
- Dark variant #BF4F87 on white: 4.48:1, large text only
- Bright variant #FF3399 on #1D0C14: 5.55:1, passes AA
- White text on #FF69B4: 2.65:1, fails
Black text on hot pink is where the color works. At 7.9:1 it clears AAA, so a hot pink fill with a dark label is fully accessible while the same fill with white text isn’t.
For hot pink text on white, you need to go deeper than the standard dark variant. The shade at #9F4270 reaches 6.02:1 and passes AA, while #BF4F87 stops at 4.48:1 and covers large text only.
Wide-gamut displays make hot pink look different from the mockup. On a P3 screen the same hex renders more intense than on sRGB, so review the color on the panel your users actually have.
What Are the Shades of Hot Pink?
Shades come from mixing black into #FF69B4 while holding hue at 330°:
- #DF5C9E
- #BF4F87
- #9F4270
- #80345A
- #602744
- #401A2D
- #200D16
Tints run toward white and give you the surface end of the family: #FF77BB, #FF84C2, #FF92C8, #FFA0CF, #FFADD6, #FFBBDD, #FFC9E4, and #FFD6EB. Those pale steps handle selected-row fills and soft banners where the base would overwhelm.
The critical step is #9F4270. That’s where hot pink crosses into AA territory on white at 6.02:1, and it’s the value you reach for whenever pink has to be read rather than just seen.
Named neighbors sit further out than the shade ramp does:
- Pale violet red (#DB7093): desaturated, 3.11:1 on white
- Orchid (#DA70D6): pushed toward purple, 2.89:1 on white
- Deep pink (#FF1493): more saturated, 3.64:1 on white
- Cerise (#DE3163): pulled toward red, 4.44:1 on white
What UI Elements Work Best with Hot Pink?
Hot pink belongs on elements that need to feel deliberate and energetic without carrying small light-mode text. At 2.65:1 against white it can’t host white labels or serve as a text color, which removes most of the structural layer.
That rules out body text, navigation labels on light backgrounds, and borders that need to identify a component. Four element types are where hot pink genuinely performs.
Primary Buttons and CTAs
Hot pink makes an effective primary button when the label is dark. Black text on #FF69B4 hits 7.9:1 and clears AAA, which is the opposite of what most teams assume about a color this bright.
Switch the fill to #9F4270 if your design system requires white labels. White on that shade reaches 6.0:1 and passes AA, so you keep the pink identity and the light label together.
Reserve it for one action per view. Hot pink loses its pull the moment a screen carries two of them.
Hover and active states need the shade ramp, not opacity. Dropping to #DF5C9E on hover keeps the hue stable, while a transparency shift changes the effective contrast against whatever sits underneath.
Status Badges and Tags
Badges suit hot pink because they’re small, non-semantic, and often need to separate from the red-yellow-green severity ladder entirely. Category tags, “new” markers, and beta labels all fit.
Build the soft variant from a tint. A #FFD6EB fill with #80345A text gives you a readable badge at 7.4:1 where a solid #FF69B4 fill with white text would fail.
Keep it out of the severity system. Hot pink carries no conventional status meaning, which is a feature for categorization and a liability for error states.
Data Visualizations
Charts use hot pink as a categorical series color that separates cleanly from the standard blue-green-orange set. It’s distinct enough to read as its own category at small sizes.
It also survives color vision deficiency better than red does. Under deuteranopia hot pink shifts toward a blue-gray rather than collapsing into the greens, so it stays distinguishable in a mixed series.
Pair it with a pattern or a direct label anyway. Hue alone is never enough in a chart legend.
Avoid using it for the largest area in a stacked chart. A full-saturation pink covering half the plot pulls attention away from the comparison the chart exists to make.
Dark Mode Accents
Dark mode is where hot pink stops fighting the contrast math. At 7.93:1 on pure black it clears AAA, and the bright variant #FF3399 on the computed surface #1D0C14 holds 5.55:1 and passes AA.
Lower the lightness slightly when you port a light-mode token. The value that looked balanced on white reads as glaring against near-black, and pulling back to the tint ramp’s lower steps restores the balance.
What Are the Best Hot Pink Color Palettes for UI?
Every palette below comes from rotating hue around #FF69B4 at fixed saturation and lightness. Pick by how much tension the product needs, then verify the accent against your real background before committing it.
Monochromatic
Monochromatic holds hue at 330° and moves lightness: #FF69B4, #D8006C, and #FFD6EB. Teams use this when pink is the brand and any second hue would dilute the identity.
The three steps map cleanly to text, fill, and surface. #D8006C reaches 5.4:1 on white and handles the text role the base can’t.
Analogous
Analogous pulls neighbors 30° in each direction: #FF69B4, #FF6969, and #FF69FF. Warm, saturated, and cohesive, which suits consumer and lifestyle products more than dense tools.
All three sit at identical lightness, so they blur together at small sizes. Separate them by element and never place two side by side at the same scale.
Complementary
Hot pink’s complement sits opposite at 150°: #FF69B4 paired with #69FFB4. Maximum tension, and a genuinely usable pairing for dark interfaces.
Mint at #69FFB4 fails badly on white at 1.4:1 and reaches 13.9:1 on black. That inversion is the argument for building the palette against your actual surface rather than a blank canvas.
Triadic
Triadic gives you #FF69B4, #B4FF69, and #69B4FF. Useful for categorical charts, where three evenly spaced hues need to stay distinguishable.
The blue at #69B4FF is the practical one. It carries interactive meaning while pink carries brand and green carries success, which divides the semantic work sensibly.
Split-Complementary
Split-complementary softens the head-on pairing: #FF69B4, #69FF69, and #69FFFF. You keep the opposition and gain a third value for secondary states.
This is the most flexible of the five for product work. Visily’s theme tools can generate the tint and shade ladder for each value so hover and active states come out accessible rather than hand-mixed.
Which Colors Are Similar to Hot Pink?
Four named colors sit close enough to #FF69B4 to substitute for it, and each moves the contrast math:
- Pale violet red (#DB7093): the nearest neighbor, desaturated, 3.11:1 on white
- Orchid (#DA70D6): shifted toward purple, 2.89:1 on white
- Deep pink (#FF1493): more saturated and slightly darker, 3.64:1 on white
- Cerise (#DE3163): pulled toward red, 4.44:1 on white
Cerise is the practical substitute when a layout needs pink that nearly passes AA. At 4.44:1 it clears the large-text bar comfortably and lands just under the body-text threshold.
None of them solves the small-text problem on white. For that you need the shade ramp, as covered above.
Which Colors Pair Best with Hot Pink?
Deep teal is hot pink’s strongest partner in product work. As the complementary direction it produces maximum separation, and a darkened teal clears AA on white where hot pink can’t.
Neutrals decide whether the pairing reads as considered or as costume. Near-black at #1A1A1A and off-white at #FAFAFA both let hot pink sit as a deliberate accent, while mid-grays flatten it.
Black is the classic partner for a reason. At 7.93:1 the pairing is fully accessible in both directions, and it’s the combination most fashion and consumer brands land on.
Warm neutrals soften it where black sharpens it. A cream surface at #FAF7F2 keeps hot pink energetic without the high-fashion edge that pure black brings, which suits products aimed at a broader audience.
Apply the 60-30-10 split:
- 60% neutral: near-black or off-white surfaces
- 30% secondary: a deep teal or navy for structure and links
- 10% hot pink: the primary CTA, the brand mark, the one highlight
Hot pink almost never earns more than 10%. Past that it reads as a theme rather than an accent.
Which Colors Should You Avoid Pairing with Hot Pink?
Two computed near-clashes cause the most trouble: #FF6976 and #FF69F3. Both sit 25° away at identical lightness, so the edge between them vibrates and the eye can’t find a boundary.
Red is the bigger practical problem. Hot pink and red are close enough in hue that placing them together reads as a mistake, and it undermines red’s error semantics by putting a similar color next to it with no meaning attached.
Orange clashes for the same reason from the other direction. The warm hues on either side of pink all compete without contrasting.
Avoid white text on any hot pink fill. At 2.65:1 the label fails, and switching to a heavier font weight doesn’t change a luminance ratio.
Does Hot Pink Meet Accessibility Standards?
Hot pink fails WCAG AA against white and passes AAA against black. The 2.65:1 measurement on white falls below both the 4.5:1 body-text threshold and the 3:1 large-text floor defined by the W3C.
Where hot pink lands across common pairings:
- #FF69B4 on white: 2.65:1, fails AA and the 3:1 non-text floor
- White on #FF69B4: 2.65:1, fails
- Black on #FF69B4: 7.93:1, passes AAA
- #9F4270 on white: 6.02:1, passes AA
- #FF3399 on #1D0C14: 5.55:1, passes AA
The black-text exception is what keeps hot pink usable. Any hot pink surface with a dark label is compliant at every text size.
Color vision deficiency treats hot pink better than red. Under deuteranopia it shifts toward a muted blue-gray rather than merging with the greens, so it retains separation in a mixed palette.
Protanopia is the harder case. Reduced red sensitivity dims hot pink noticeably, so an interface that depends on it for emphasis loses that emphasis for those users unless a second cue carries the signal.
How Can You Convert Hot Pink Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same pink from a different angle:
- HEX #FF69B4: the default in design files and CSS
- RGB rgb(255, 105, 180): the three channels in decimal
- RGBA rgba(255, 105, 180, 1): adds alpha for tinted overlays and selection fills
- HSL hsl(330, 100%, 71%): separates hue from saturation and lightness
- HSB 330, 59, 100: the picker model in most design tools
- CMYK 0, 59, 29, 0: subtractive ink percentages for print
HSL is the format that makes the pink ramp workable. Holding hue at 330° and stepping lightness generates the entire tint and shade ladder, which is how you get from #FF69B4 to the AA-compliant #9F4270 in a predictable series.
CMYK is where hot pink loses the most. The 0, 59, 29, 0 mix sits well outside what standard process inks can hit, so a printed hot pink comes back visibly duller unless you specify a spot color.
Note the HSB and HSL disagreement when reading design files. HSB reports 59% saturation and HSL reports 100% for the same color, so confirm which model your tool uses before copying a number between them.
Wrapping Up
Hot pink works when you respect the direction of its contrast: dark labels on pink fills, #9F4270 when pink has to be text on white, and the base value reserved for dark surfaces where it clears AAA. Treat it as a brand and category color rather than a status color, since it carries no conventional severity meaning.
Build the ramp instead of eyeballing it. Open Visily and use its AI-powered design tools to generate your hot pink tints and shades, accessible button states, and matched accent pairings across the entire design in one pass.
