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 |
Coral is excellent for lifestyle brands, wellness products, and designs seeking a warm, modern, and approachable aesthetic.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.