Skip to content

Coral #ff7f50

The warmest color the ocean ever made.

RGB
255, 127, 80
HSL
16°, 100%, 66%
CMYK
0, 50, 69, 0
Luminance
0.3702

About Coral

Coral, #ff7f50, is orange softened with pink — reef-colored warmth that flatters every skin tone it approaches, which is why it rules lipstick, resort wear and sunset photography. It is friendliness with a glow.

History

Precious red coral was jewelry and talisman around the Mediterranean for millennia before the color took the name. Pantone’s 2019 “Living Coral” — chosen partly to spotlight dying reefs — pushed it back to the front of design consciousness.

Psychology

Coral reads optimistic, social and approachable — orange’s energy without its hazard coding, pink’s warmth without its sweetness. It photographs as health: sun, fruit, skin.

In design

Coral shines as buttons and highlights on teal, navy and white — the beach palette is coral + turquoise + sand, and it never misses. As text it fails on white (2.4:1); darken toward tomato/terracotta for copy. Gradients from coral to pink or gold feel like golden hour.

In culture

Coral is the reef itself — beauty as ecosystem — plus vintage lipstick names and every tropical brochure ever printed. Its modern meaning carries a quiet ecological alarm.

Brands that own coral

Shades of coral

Every format

HEX#ff7f50
RGBrgb(255, 127, 80)
HSLhsl(16, 100%, 66%)
CMYKcmyk(0%, 50%, 69%, 0%)
LABlab(67.3 45.4 47.5)
LCHlch(67.3 65.7 46.3)
OKLCHoklch(0.735 0.168 40.2)

Copy-ready code

/* CSS */
color: #ff7f50;
background-color: #ff7f50;
/* Tailwind (arbitrary) */
class="text-[#ff7f50] bg-[#ff7f50]"
/* SCSS */
$brand: #ff7f50;
/* SwiftUI */
Color(red: 1.000, green: 0.498, blue: 0.314)
/* Android */
Color.parseColor("#ff7f50")

Accessibility — WCAG contrast

Aa
#ff7f50 on white: 2.50:1
AA ✗ fail · AA-large · AAA
Aa
#ff7f50 on black: 8.40:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red100.0%
Green49.8%
Blue31.4%

CMYK percentages

Cyan0.0%
Magenta50.2%
Yellow68.6%
Key (black)0.0%

Color previews

#ff7f50 text on a black background

contrast 8.40:1

Card sample

#ff7f50 text on a white background

contrast 2.50:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #ff7f50;
Background color
Panel with #ff7f50 background
background-color: #ff7f50;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #ff7f50;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(255, 127, 80, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(255, 127, 80, 0.45);
Border & gradient
Gradient panel
border: 3px solid #ff7f50;
background: linear-gradient(135deg, #ff7f50, #FFF450);

Monochromatic scale

Palettes built from #ff7f50

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Coral, answered

What is the hex code for coral?

CSS coral is #ff7f50; light coral is #f08080 and Pantone’s Living Coral maps near #ff6f61.

What colors go with coral?

Turquoise and teal (the beach duo), navy for contrast, sand and cream for warmth, gold for sunset gradients.

Is coral suitable for text?

Not on light backgrounds (~2.4:1 on white). Use it for fills and accents, or step down to terracotta (#c1440e-class) for readable warm text.

Work with #ff7f50 in the Color Lab