Coral Background
#FF7F50 · rgb(255, 127, 80)
About the coral background
Coral (#FF7F50) sits precisely between orange and pink — rgb(255, 127, 80) — and inherits the best of both: orange's warmth and energy, pink's approachability. It's the color of tropical reefs, summer campaigns and friendly brands.
As a background it's vivid but not aggressive. White text lands around 2.6:1 (headlines only), while black text measures about 8:1, so dark typography keeps it accessible.
What to use a coral background for
- Summer, travel and lifestyle campaigns
- Friendly SaaS and startup branding
- Energetic call-to-action buttons
- Warm gradient endpoints with peach or gold
How to use coral in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page coral background */
body {
margin: 0;
background-color: #FF7F50;
}
/* A single section or element */
.hero {
background-color: rgb(255, 127, 80);
} Coral shades and tints
Click any swatch to copy it. Tints mix coral with white; shades mix it with black.
Coral background FAQ
What colors make coral?
In light terms coral is rgb(255, 127, 80) — full red with green at half and blue at about a third. Mix orange and pink paint and you approximate the same hue.
Is coral accessible for text backgrounds?
Black text on coral #FF7F50 reaches about 8.4:1 — excellent. White text only reaches ~2.5:1, which fails every WCAG text threshold, so use dark type on coral.
What is the hex code for coral?
Coral is #FF7F50 in hexadecimal, rgb(255, 127, 80) in RGB and hsl(16, 100%, 66%) in HSL. Paste #FF7F50 into any CSS background-color property to use it.
How do I set a coral background in CSS?
Add background-color: #FF7F50; to any element, or apply it to the whole page: body { background-color: #FF7F50; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(255, 127, 80) — with identical results.