Color code and palette
Coral Color
Coral is a warm pink-orange with the CSS value #FF7F50. It feels lively and approachable, giving calls to action and illustrations energy without the severity of pure red.
Coral
#FF7F50
Color formats
The same base color in common web formats.
Shades
| Color | Name | HEX | RGB | HSL | Copy |
|---|---|---|---|---|---|
| Coral 50 | #FFECE5 | 255, 236, 229 | 16, 100%, 95% | ||
| Coral 100 | #FFC7B3 | 255, 199, 179 | 16, 100%, 85% | ||
| Coral 200 | #FFA280 | 255, 162, 128 | 16, 100%, 75% | ||
| Coral 300 | #FF7C4D | 255, 124, 77 | 16, 100%, 65% | ||
| Coral 400 | #FF571A | 255, 87, 26 | 16, 100%, 55% | ||
| Coral 500 | #E63D00 | 230, 61, 0 | 16, 100%, 45% | ||
| Coral 600 | #B33000 | 179, 48, 0 | 16, 100%, 35% | ||
| Coral 700 | #802200 | 128, 34, 0 | 16, 100%, 25% | ||
| Coral 800 | #4D1400 | 77, 20, 0 | 16, 100%, 15% | ||
| Coral 900 | #1A0700 | 26, 7, 0 | 16, 100%, 5% |
Text contrast
These ratios use the WCAG relative luminance formula.
Aa White text 2.50:1
Fail
Aa Black text 8.40:1
AAA
Ways to use Coral
Friendly calls to action
Travel and lifestyle illustration
Accents paired with teal
Colors that go with Coral
Color-wheel harmonies built from #FF7F50. Click a swatch to copy it or open the set in the color wheel.
Split complementary
Open in color wheelA base plus the two neighbors of its complement — contrast with less tension.