Coral HEX Code
The HEX code for coral is #FF7F50. Coral is a pink-orange color that takes its name from the marine organism. It's a warm, inviting color that became especially popular as Pantone's 2019 Color of the Year ("Living Coral").
Coral Color Values
| Format | Value |
|---|---|
| HEX | #FF7F50 |
| RGB | rgb(255, 127, 80) |
| HSL | hsl(16, 100%, 66%) |
| CMYK | C:0 M:50 Y:69 K:0 |
Coral Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Coral | #F08080 | Soft, pink |
| Coral | #FF7F50 | CSS coral |
| Living Coral | #FF6F61 | Pantone 2019 |
| Salmon | #FA8072 | Pink-orange |
| Dark Coral | #CD5B45 | Deeper tone |
| Tomato | #FF6347 | More red |
Coral in Design
Coral conveys:
- Warmth: Inviting, friendly
- Optimism: Positive, energetic
- Femininity: Soft, approachable
- Tropical: Beach, vacation
Living Coral (Pantone 16-1546)
``css
/* Pantone 2019 Color of the Year */
.living-coral {
background-color: #FF6F61;
}
`
Coral Color Palettes
| Style | Primary | Secondary | Accent |
|---|---|---|---|
| Beach | #FF7F50 | #FFF8DC | #20B2AA |
| Modern | #FF6F61 | #F5F5DC | #2F4F4F |
| Soft | #F08080 | #FAFAD2 | #87CEEB |
Using Coral in Web Design
`css
/* Coral CTA button */
.btn-coral {
background-color: #FF7F50;
color: white;
border: none;
}
.btn-coral:hover {
background-color: #FF6347;
}
/* Coral accent */
.accent-bar {
border-left: 4px solid #FF7F50;
}
``
Coral vs Salmon vs Peach
| Color | HEX | Tone |
|---|---|---|
| Coral | #FF7F50 | Orange-pink |
| Salmon | #FA8072 | Pink-orange |
| Peach | #FFDAB9 | Light, soft |