Coral

#ff7f50

Lighter, peach-leaning coral orange for friendly UI accents

Save
Share

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 's gentle lean, way less pink-forward than , and it sits with more visual weight than 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
2.50:1Fail

On Gray 100 #f5f5f5

Aa
2.29:1Fail

On Gray 900 #18181b

Aa
7.09:1AAA

On Black #000000

Aa
8.40:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Coral

Open the generator with this color pre-loaded.

Start creating