Pucker Up
#ff1177
Punchier warm fuchsia-red for high-contrast UI moments
About Pucker Up
Pucker Up is that hot, candy-red that looks like it's still holding onto pink light, even though it's firmly in the red family. On a dark mock it reads louder than a clean crimson, but it doesn't drift as far toward fuchsia as Pink Ink or Cyberpink. The undertone feels warmer and more saturated, with a slightly higher lightness that keeps it from feeling heavy or "stuck" in the background.
I use Pucker Up when the UI needs urgent without tipping magenta. Think checkout confirmations in retail, promo and coupon banners in ecommerce, and session or payment status chips in fintech. It also works well for motion accents in SaaS when you want the red to pop through easing, without the cooler tech chill you'd get from Cyberpink.
Pair it with near-neutrals that aren't too creamy. Warm whites can make it go extra candy, so if the layout's already warm, try cooler grays to keep the red feeling crisp.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.