Coral
#ff7f50
Lighter, peach-leaning coral orange for friendly UI accents
About Coral
Coral sits dead center in the orange spectrum without hedging toward pink or red the way its neighbors do. It's saturated enough to feel present, but there's a lightness to it that keeps it from reading as aggressive. This is the shade that actually looks like coral, the mineral, the reef thing, not a compromise between two other colors.
You'll find it working in health and wellness interfaces, hospitality apps, and social platforms where you need warmth that doesn't exhaust the eye. It's more committed to orange than Coralistic's gentle lean, way less pink-forward than Anime Blush, and it sits with more visual weight than Candy despite being equally approachable. The difference: Coral works because it's honest about what it is. No apologies, no soft edges hiding what's underneath.
Pair it with warm neutrals and it disappears into comfort. Pair it with cool grays or deep charcoals and it actually sings, there's enough substance in the color to hold its own without feeling like a fight. That's the move most designers miss with orange in this range.
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.