36 Shades of Pink Color Chart: Names, Hex Codes, RGB & UI Palettes
By Pikka Color Studio•Updated November 2026•Light Pink, Baby Pink, Blush, Dusty Rose & Magenta Reference
From whisper-soft baby pink (#F4C2C2) and light pink (#FFB6C1) to grounded dusty rose (#DCAE96) and electric hot pink (#FF69B4), the pink color spectrum is one of the most versatile families in digital UI design, fashion branding, and modern web typography.
Below is our complete developer and designer reference chart featuring 36 named shades of pink organized by undertone and saturation. Click any hex button to copy the exact code to your clipboard, or inspect deeper color scales in our Named Color Codes Directory.
1. Light Pink, Baby Pink & Soft Pastel Pinks
Delicate, high-luminance tints created by blending pure red or rose with generous white light. Ideal for background surfaces, cosmetic packaging, and gentle UI badges.
Shade Name
HEX Code
RGB Value
HSL Value
Best Design & UI Application
Light Pink (W3C CSS)
rgb(255, 182, 193)
hsl(351, 100%, 86%)
Official HTML/CSS LightPink keyword; soft hero backgrounds.
Baby Pink
rgb(244, 194, 194)
hsl(0, 69%, 86%)
Warm nursery and lifestyle branding, soft card fills.
Modern DTC skincare, gender-neutral lifestyle packaging.
Cotton Candy Pink
rgb(255, 188, 217)
hsl(334, 100%, 87%)
Playful illustrations, sweet confectionery & social graphics.
2. Blush, Dusty Rose & Muted Luxury Pinks
Sophisticated, desaturated pinks toned with subtle earth or gray undertones. Widely used in luxury interior design, bridal palettes, and high-fashion eCommerce.
Soft floral textures, subtle hover state highlights.
3. Warm Coral, Salmon & Peach Pinks
Golden-undertone pinks sitting between red and orange on the 360° color wheel. Energetic, welcoming, and highly effective for conversion buttons and summer campaigns.
Shade Name
HEX Code
RGB Value
HSL Value
Best Design & UI Application
Coral Pink
rgb(248, 131, 121)
hsl(5, 90%, 72%)
Tropical branding, warm mobile app onboarding screens.
Salmon Pink
rgb(255, 145, 164)
hsl(350, 100%, 78%)
Vibrant consumer web apps, food & hospitality UI.
Flamingo Pink
rgb(252, 142, 172)
hsl(344, 95%, 77%)
Summer resort visuals, bold social media templates.
High-saturation electric pinks that command immediate visual attention. Engineered for dark mode accents, cyberpunk HUDs, and bold pop-culture branding.
Shade Name
HEX Code
RGB Value
HSL Value
Best Design & UI Application
Standard Pink (W3C CSS)
rgb(255, 192, 203)
hsl(350, 100%, 88%)
Classic HTML/CSS Pink keyword.
Hot Pink
rgb(255, 105, 180)
hsl(330, 100%, 71%)
High-energy fashion campaigns, active focus rings.
Deep Pink
rgb(255, 20, 147)
hsl(328, 100%, 54%)
Vibrant gradient stops, music & streaming UI accents.
Deep, jewel-toned pinks shaded with black or crimson. Unlike pale pinks, these rich tones achieve WCAG AA/AAA text contrast against pure white backgrounds.
Shade Name
HEX Code
RGB Value
HSL Value
Best Design & UI Application
Dark Pink
rgb(231, 84, 128)
hsl(342, 75%, 62%)
High-contrast primary buttons, bold chart series.
Raspberry
rgb(227, 11, 92)
hsl(338, 91%, 47%)
Passes WCAG AA with white text; ideal for CTA buttons.
Cerise Pink
rgb(222, 49, 99)
hsl(343, 72%, 53%)
Cherry-rose accent for modern fintech & retail apps.
Amaranth
rgb(229, 43, 80)
hsl(348, 78%, 53%)
Expressive alert badges, editorial pull-quotes.
Mulberry Berry
rgb(197, 75, 140)
hsl(328, 51%, 53%)
Autumnal fashion palettes, deep plum-pink pairings.
Ruby Rose
rgb(155, 17, 30)
hsl(354, 80%, 34%)
Passes WCAG AAA contrast; dark berry typography.
5 Production-Ready Pink Color Palettes (With Hex Codes)
Searching for what colors go with light pink, dusty rose, or hot pink? Click any swatch below to copy its hex value, or launch the full 5-color harmony inside Pikka's Color Palette Builder:
Sun-drenched coral and salmon pinks balanced by golden apricot and deep ocean teal.
Coral Pink
#F88379
Salmon Pink
#FF91A4
Peach Puff
#FFDAB9
Deep Teal
#006D77
Ocean Navy
#1D3557
Light Pink vs. Baby Pink vs. Pastel Pink: What's the Difference?
Designers frequently ask how the three most popular pale pink tints differ in digital RGB and HSL color space:
Light Pink (#FFB6C1): The official W3C CSS keyword lightpink. It carries a slightly cooler crimson-rose hue angle (351°) with 100% saturation and 86% lightness.
Baby Pink (#F4C2C2): Positioned at a pure 0° red hue angle with softer saturation (69%), giving it a warmer, calmer chalky finish that avoids neon glare on OLED displays.
Pastel Pink (#FFD1DC): The lightest of the trio (91% lightness), making it ideal as an off-white background surface for cards, callouts, and tags when paired with dark charcoal or deep plum typography.
Designing Accessible UI with Pink (WCAG 2.1 Contrast Rules)
Because standard pink (`#FFC0CB`) and light pink (`#FFB6C1`) have high relative luminance, placing white text on top of a light pink button yields a contrast ratio around 1.55:1—failing WCAG 2.1 AA legibility standards (which require 4.5:1 for normal body text).
For White Text on Pink Buttons: Choose deep berry or crimson-rose shades such as Raspberry (#E30B5C, contrast 4.62:1) or Ruby Rose (#9B111E, contrast 8.40:1).
For Light Pink Badges & Cards: Pair a #FFD1DC or #FADADD background with dark rose-burgundy text (#500724, Tailwind rose-950) and verify the exact score in our WCAG 2.1 & APCA Contrast Checker.
Explore Related Pink Swatches, Palettes & Tools
Dive deeper into individual pink color profiles, harmonies, and converters across Pikka:
