orange · vivid · light

#ff7f50CoralCoral is a vivid orange — complete hex color profile

What is color #ff7f50?

#ff7f50, known as Coral, is a radiant orange with HSL 16°, 100%, 66%. Its vivid saturation and light lightness place it in a hot part of the spectrum.

This color evokes optimism and warmth, which explains why it works well in autumn campaigns, children's products, and creative agency identities.

Paired with its complement #50d0ff, #ff7f50 produces subtle contrast. For softer compositions, pair it with a soft neutral to let it breathe.

Conversions for #ff7f50

HEX
#ff7f50
RGB
255, 127, 80
HSL
16°, 100%, 66%
HSV
16°, 69%, 100%
CMYK
0%, 50%, 69%, 0%
XYZ
50.28, 37.02, 12.08
CIE-Lab
67.29, 45.36, 47.49
Web safe
#ff6666

WCAG accessibility of #ff7f50 (Coral)

On white
2.50 : 1
Sample #ff7f50
Rating: Fail
On black
8.40 : 1
Sample #ff7f50
Rating: AAA

Tones of Coral (desaturated variations of #ff7f50)

Color harmonies for #ff7f50

Colors similar to #ff7f50

Gradients featuring #ff7f50

Linear to white
Linear to black
To complement
Radial
Tri-stop
Analogous

UI elements in #ff7f50

Buttons
NewFeaturedBeta
Notification

Short description with accent.

"Color awakens a specific emotional response."

Typography in #ff7f50

The quick brown fox
jumps over the lazy dog
1234567890 — & @ # ! ?

Body text rendered in #ff7f50.

const color = "#ff7f50";

CSS & Tailwind snippets for #ff7f50

Background
.bg-ff7f50 { background-color: #ff7f50; }
Text color
.text-ff7f50 { color: #ff7f50; }
Border
.border-ff7f50 { border: 1px solid #ff7f50; }
Box shadow
.shadow-ff7f50 { box-shadow: 0 4px 14px #ff7f5040; }
CSS variable
:root { --color-ff7f50: #ff7f50; }
Tailwind config
colors: {
  'coral': '#ff7f50',
}

Frequently asked questions about #ff7f50

Explore named orange colors