Prince Charming
#cc2277
Confident midlight rose-magenta for modal accents
About Prince Charming
I keep spotting Prince Charming in UI mockups as that confident red-pink that looks ready to act, not ready to panic. Against Bottom of My Heart, it feels a touch more lifted and fashion-forward, less cool and weighty, with a warmer tilt that still stays clean. Compared to Self-Love, it reads brighter and more playful, less steady and pulse-like. And next to Magentarama, it keeps its red identity longer, without that sharper magenta snap.
This is my go-to accent for dashboards and finance apps where you want a highlighted state that feels human, like a priority action or a completed step. Use it for credit review chips, saved-collection labels, chat "message received" confirmations, and course or subscription callouts on light surfaces. It's the one you reach for when you want interaction cues that carry meaning, not urgency language.
One quirk: pair it with neutral grays and crisp whites, not smoky purples, or it can start to read slightly more pink than intended.
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.
