Grapefruit
#fd5956
Light coral-red warmth with a softer punch
About Grapefruit
Grapefruit feels like a ripe slice of red-orange on a bright card mockup. It reads warmer than the pink-leaning Grenadine Pink, but it still keeps a cleaner orange core than Camellia. Compared to Fusion Red, it's less stoplight-sharp and more rounded in tone, so it doesn't hit as red-forward or as "act now" intense.
I use this when the UI needs urgency with a softer landing: think alerts and moderation states in creator platforms, food and health app confirmations, and the secondary buttons in media workflows where you want taps to happen without the flame effect. It stays punchy, but the undertone leans grapefruit-red, which makes it feel more layered than the lighter, more cheerful oranges.
Pair it with deep neutrals or cool grays for contrast. On very warm backgrounds it can start to look a touch dusty, so I usually give it cooler surfaces to stand on.
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.
