Tints & Shades
50
100
200
300
400
500
600
700
800
900
Scale from white (50) through Hot Pink (500) to black (900), interpolated in Lab color space.
Color Values
- HEX
- #FF69B4
- RGB
- rgb(255, 105, 180)
- HSL
- hsl(330, 100%, 71%)
- OKLCH
- oklch(0.728 0.197 352)
- CMYK
- cmyk(0%, 59%, 29%, 0%)
--color-hot-pinkbg-[#FF69B4]Accessibility
Score: 48/100On White (#FFF)
2.65:1
On Black (#000)
7.93:1
On Light Gray (#F5F5F5)
2.43:1
Best text color on this background:
Design Applications
background-color: #FF69B4
color: #FF69B4
bg-[#FF69B4] text-[#000000]
border-left: 4px solid #FF69B4
Color Harmonies
Complementary
Mint Cream
#F5FFFA
Split-Complementary
Similar Colors
Color Meaning & Psychology
Hot pink — the color of highlighters, Mattel's Barbie, and disco fashion — is maximally energetic and playful. Its fluorescent quality makes it the pink of pop culture, of youth, and of unapologetic boldness. Brands that use hot pink are making a statement: they do not fear standing out.
Industry Usage
Common contexts and industries where Hot Pink is applied in professional design.
- Beauty, cosmetics, and personal care
- Baby products and nursery design
- Romantic occasions and greeting cards
- Confectionery and dessert brands
- Fashion and lifestyle brands targeting millennial audiences
- Social media apps emphasizing intimacy
- Breast cancer awareness campaigns
- Toy brands and children's entertainment
Accessibility Considerations
Normal Text
Fails AA
4.5:1 minimum required
Large Text
Fails AA Large
3:1 minimum required
UI Components
Check contrast
3:1 for non-text UI
Hot Pink is a light color. Use black (#000000) text on top of it for maximum readability (7.93:1). Avoid white text on this background.
CSS & Code Examples
Background
background-color: #FF69B4;Text
color: #FF69B4;Border
border: 2px solid #FF69B4;Box Shadow
box-shadow: 0 4px 20px #FF69B440;Gradient
background: linear-gradient(135deg, #FF69B4, #ff9ce6);Tailwind-style
--color-hot-pink: #FF69B4;Tailwind CSS Utilities
Use arbitrary value syntax in Tailwind CSS to apply Hot Pink without a custom config.
Background
bg-[#FF69B4]Text
text-[#FF69B4]Border
border-[#FF69B4]Ring
ring-[#FF69B4]Fill
fill-[#FF69B4]From (gradient)
from-[#FF69B4]Via (gradient)
via-[#FF69B4]To (gradient)
to-[#FF69B4]Design Tokens
Ready-to-use Hot Pink design token in CSS custom properties, SCSS, Tailwind v3/v4, and JSON formats.
CSS Custom Properties
:root {
--color-hot-pink: #FF69B4;
--color-hot-pink-rgb: 255, 105, 180;
--color-hot-pink-hsl: 330, 100%, 71%;
}SCSS Variables
$color-hot-pink: #FF69B4; $color-hot-pink-rgb: 255, 105, 180; $color-hot-pink-hsl: 330, 100%, 71%;
Tailwind v3 Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'hot-pink': '#FF69B4',
},
},
},
};Tailwind v4 (@theme)
/* tailwind.css */
@theme {
--color-hot-pink: #FF69B4;
}JSON Design Token (W3C format)
{
"hot-pink": {
"value": "#FF69B4",
"type": "color",
"description": "Hot Pink — #FF69B4"
}
}Related Palettes & Combinations
Color Combinations
More pink colors
View all →What Does Hot Pink Mean? Color Psychology & Cultural Symbolism
Pink's psychological profile has been studied more than most colors precisely because its associations have been culturally contested. At #FF69B4, Hot Pink resolves into confidence—the evolved version of a hue that has moved from decoration to declaration.
- Across color psychology research, pink consistently tests high for "joy" associations, making Hot Pink a reliable vehicle for confidence in cross-demographic audiences.
- Brand designers draw on pink-family tones to project creativity and confidence—values that Hot Pink communicates in a light key.
- At 100% saturation, Hot Pink reads as vivid—Hot and neon pinks are among the most attention-demanding tones in design—used in fashion campaigns, music branding, and Gen-Z consumer culture to signal disruption and unapologetic self-expression.
- Hot Pink's light lightness (71%) shifts its psychological register: Pale and blush pinks have a quiet elegance—used in weddings, luxury beauty, and minimal lifestyle brands for their soft romance without sentimentality.
In a world of muted neutrals, Hot Pink is a choice. Make it deliberately and it rewards you with warmth no other color delivers.
How to Use Hot Pink in Design: Applications, Pairings & Best Practices
In contemporary design, Hot Pink has shed the limiting associations of a single decade's worth of "millennial pink" and become a genuinely versatile signal of warmth, creativity, and modern emotional intelligence.
- Avoid: industries requiring seriousness or authority (finance, legal, government) unless used as a calculated subversion, and technology products targeting broad professional audiences without a specific cultural reason.
- Color harmonies: Hot Pink's complementary color creates a high-energy split ideal for promotional design; its analogous palette (±30° hue) builds cohesive, monochromatic sophistication.
- Proportional use: Hot Pink's vivid saturation (100%) means small applications—accents, highlights, icons—deliver maximum impact without visual fatigue. Reserve large-scale use for intentional brand moments.
- Hot Pink creates strong legibility with black text overlays (7.9:1 contrast ratio), making it a reliable background or surface color in design systems
- Typography: Hot Pink as text requires a dark background; its 71% lightness means it provides 2.6:1 contrast on white, not meeting WCAG AA.
In a world of muted neutrals, Hot Pink is a choice. Make it deliberately and it rewards you with warmth no other color delivers.
Hot Pink Accessibility: WCAG Contrast Ratios, Color Blindness & Inclusive Design
Hot Pink (#FF69B4) achieves a 7.93:1 contrast ratio with black text, surpassing the WCAG 2.1 AAA threshold of 7:1. This exceptional contrast qualifies it for body text, UI components at any size, and all accessibility-sensitive interface contexts. Relative luminance: 34.7%.
- As text on white (#FFFFFF): 2.65:1 — Fail
- As text on black (#000000): 7.93:1 — AAA ✓
- Best text color on Hot Pink background: Black (#000000) at 7.93:1
- WCAG 2.1 luminance: 34.7% — mid-range luminance—it sits in the transition zone where both dark and light text approaches require testing against the 4.5:1 WCAG threshold
- Hot Pink qualifies for all text sizes including small body copy (AAA).
- Color blindness consideration: protanopia and deuteranopia (red-green color blindness, ~8% of males) may affect how pink-family colors are distinguished from greens and browns. For critical UI states, supplement color alone with shape, label, or pattern cues.
Hot Pink's WCAG profile makes it a compliant choice for most text applications.
Hot Pink in Industry: Branding, Design & Market Applications
Hot Pink (#FF69B4) is most at home in industries where warmth, playfulness, optimism, and modern confidence are key brand values. Its light quality makes it particularly effective in Beauty & Personal Care contexts, where the vivid saturation signals affection at exactly the right register.
- Beauty & Personal Care: Pink remains a dominant force in beauty despite its expanded semantic range. It signals femininity, self-care, and the small luxuries of personal grooming—and it works across the tonal range from bold fuchsia packaging to soft blush product photography. Gender-neutral beauty brands increasingly use specific pink tones (dusty rose, millennial pink) to retain warmth while avoiding overtly gendered associations.
- Food & Confectionery: Pink signals sweetness, freshness, and delight in food contexts. Dessert brands, bakeries, and confectioneries use it to trigger sweet-taste associations and create an atmosphere of celebratory indulgence. Particularly effective for Valentine's Day, birthday, and celebration-focused food products.
- Fashion & Lifestyle: Fashion's relationship with pink is dynamic—it cycles between softness and statement power depending on cultural moment. Currently, fashion uses pink most boldly as a color of confidence, irony, and self-aware femininity. Bold fuchsia and hot pink are more culturally resonant in fashion right now than blush; the trend trajectory matters as much as the hue.
- Brand positioning: Hot Pink is best suited for brands projecting joy, playfulness, warmth. Categories outside this positioning—industries requiring seriousness or authority (finance—tend to see weaker results.
- Adjacent applications: Beyond primary industries, Hot Pink works effectively in beauty packaging, confectionery and dessert brands, celebratory occasions—contexts where affection serves a secondary but reinforcing role.
The industries where Hot Pink performs best are those where the audience expects affection. Build brand strategy around this alignment, not against it.
Accessibility & Design Guides
Frequently Asked Questions
- What is the hex code for Hot Pink? ▾
- The hex code for Hot Pink is #FF69B4. Its RGB values are rgb(255, 105, 180) and its HSL values are hsl(330, 100%, 71%).
- What does Hot Pink mean in design? ▾
- Hot pink — the color of highlighters, Mattel's Barbie, and disco fashion — is maximally energetic and playful. Its fluorescent quality makes it the pink of pop culture, of youth, and of unapologetic boldness. Brands that use hot pink are making a statement: they do not fear standing out.
- Is Hot Pink WCAG accessible? ▾
- Hot Pink (#FF69B4) does not pass WCAG AA on white (2.65:1 ratio). Use it on dark backgrounds where it achieves 7.93:1. Its overall accessibility score is 48/100.
- What colors go well with Hot Pink? ▾
- Hot Pink pairs well with its complementary color Mint Cream (#F5FFFA). Analogous colors like Purple and Shocking Pink also work harmoniously. Check the Color Harmonies section above for the full palette.
- What is Hot Pink used for? ▾
- Hot Pink is commonly used for: Beauty, cosmetics, and personal care; Baby products and nursery design; Romantic occasions and greeting cards; Confectionery and dessert brands; Fashion and lifestyle brands targeting millennial audiences.
- What are the CSS and Tailwind values for Hot Pink? ▾
- In CSS, use `color: #FF69B4` or `background-color: #FF69B4`. The CSS custom property is `--color-hot-pink: #FF69B4`. In Tailwind CSS, use the arbitrary value class `bg-[#FF69B4]` for backgrounds or `text-[#FF69B4]` for text.