# Coral gradient: lively codes between pink and orange

[Canonical HTML page](https://gradiently.design/guide/coral-gradient)

Coral lives exactly where pink turns into orange, which gives it the warmth of one and the charm of the other. It is lively, friendly and surprisingly hard to set text on. Here are codes and the fixes.

## The short version

- A coral gradient blends warm pinkish oranges, usually leaning towards rose at one end and tangerine or peach at the other.
- The CSS named colour coral is #ff7f50, a bright orange leaning coral.
- Coral and teal are near opposites, so a direct blend between them turns grey; use teal as a separate area or accent instead.
- White text fails on bright coral; use a deep wine or brown such as #3b0d0c, or move white text onto a deep red coral.
- Coral suits summer campaigns, food and drink, beauty, fitness and friendly consumer apps.

A **coral gradient** blends warm, pinkish oranges, the colours where pink becomes orange. Lean it towards rose and it feels charming and fresh; lean it towards tangerine and it feels sunny and energetic. Coral is cheerful and very visible, which makes it a favourite for summer, food, beauty and fitness. Its two traps are a grey stripe when it meets teal and text that disappears on it. Both are easy to avoid once you know them.

## Coral, salmon, peach and watermelon

Warm pinkish oranges share a lot of names. They are worth separating, because the right word helps you pick the right stops and describe what you want to a designer or the Designer in Gradiently.

| Colour | Typical hex | Character |
| --- | --- | --- |
| Coral | `#ff7f50` | Bright and warm, leaning orange |
| Living coral | `#ff6f61` | Pinker, softer coral |
| Salmon | `#fa8072` | Paler and pinker, slightly dusty |
| Peach | `#ffcba4` | Much lighter, more orange, gentle |
| Watermelon | `#fb7185` | Pinker and cooler, playful |

Coral is the brightest of these. Its neighbours are useful stops in a coral gradient.

## Bright coral gradients

These are coral at its liveliest. They hold attention at thumbnail size, which is why they work so well for sale posts, launches, fitness classes and anything you want noticed in a busy feed.

- Classic coral: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Living coral: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Tropical punch: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Coral bloom: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Coral sunset: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Five bright coral blends. Every partner colour is a close neighbour, so the blends stay saturated.

A few ways to put them to work: "Classic coral" behind a single line such as "Doors open at noon" on a 1080×1920 story; "Tropical punch" as the cover of a summer drinks menu; "Coral sunset" running down a Pinterest pin at 1000×1500 for a holiday guide. Coral is strong, so let it fill the frame and keep everything else on the page simple: one headline, one detail, plenty of space.

## Coral gradients from pink to orange

### Pink leaning coral

Push coral towards rose and blush and it becomes softer and more romantic, ideal for beauty, florists, weddings and lifestyle brands. For the pinker side of the family, see [pink gradients](https://gradiently.design/guide/pink-gradient).

- Rose coral: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Salmon blush: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Watermelon coral: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Pink leaning corals feel softer and suit beauty and lifestyle brands.

### Orange leaning coral

Push it the other way, towards apricot and tangerine, and coral gets sunnier and louder: summer menus, smoothie bars, holidays. [Orange pink gradients](https://gradiently.design/guide/orange-pink-gradient) covers the full span between the two.

- Apricot coral: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Coral to tangerine: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Beach bar: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

Orange leaning corals are sunnier, more energetic and made for summer.

## Coral and teal without the grey middle

Coral and teal are one of the great pairings: warm against cool, reef against sea. But they sit nearly opposite each other on the colour wheel, so a straight blend between them passes through a dull grey in the middle. The fix is to keep them apart. Use teal as a ground with a coral light, coral as a ground with a teal accent, or route between them through very pale tints. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) explains why the middle goes grey.

- Avoid: grey middle: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Coral sun on teal: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Through shell white: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

The first blend greys in the middle. The other two keep coral and teal as separate colours, or join them through a pale tint.

On a menu or poster, try a very dark teal such as `#042f2e` with coral headlines and buttons. Coral reaches about 5.8 to 1 there, far better than white on coral, and it looks bold and summery. The teal side is covered in [teal gradients](https://gradiently.design/guide/teal-gradient).

## Coral on a dark ground

Coral glows beautifully against deep plum, navy or near black. A single coral light on a dark ground feels like a neon sign or a sunset over the sea, and it suits bars, music, nightlife and evening events. Keep the coral light away from where the words sit, and set them in a pale shell or white on the dark area.

- Coral on wine: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Sunset over the bay: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Coal and coral: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

One coral light, plenty of dark. The coral reads brighter than it would on white.

## Text on a coral gradient

Coral looks bold enough for white type, and that is exactly why so many coral designs fail. White on `#ff7f50` measures about 2.5 to 1, well under the 4.5 to 1 asked for in body text. A deep wine brown such as `#3b0d0c` measures about 6.7 to 1 on the same coral and keeps the warmth. If you want white type, deepen the coral to a red such as `#e11d48`, where white reaches about 4.7 to 1. The method is in [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility).

A pilates studio sale post with pale text running across the brightest part of a coral gradient

Light words straight across bright coral look bold but are hard to read on a phone in daylight.

The same pilates post with clear text on a calmer, deeper area of the coral gradient

The same post with a calmer zone and a type colour that suits it.

A Gradiently Mark makes this adjustment by itself: it moves its calmest, best contrasting region behind your words and Auto ink picks light or dark type for each line from the Mark's own palette. No boxes or drop shadows needed.

## Coral gradient CSS for a button

Coral makes a friendly call to action. Keep the gradient light enough that a dark label stays readable, and slide its position on hover rather than swapping colours. [CSS gradient buttons](https://gradiently.design/guide/css-gradient-button) has more patterns.

```css
.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}
```

A coral pill with deep wine text. The gradient slides on hover instead of changing colour.

## FAQ

### What is the hex code for coral?

The CSS named colour `coral` is `#ff7f50`. Pantone's Living Coral is often approximated as `#ff6f61`.

### What colours go with a coral gradient?

Peach, rose, tangerine and gold blend into it. Deep teal, navy and plum make strong partners when kept as separate areas.

### Why does my coral and teal gradient look grey?

Coral and teal sit nearly opposite on the colour wheel, so the colours between them lose saturation. Keep them apart, or join them through a pale tint.

### Can I use white text on coral?

Not on bright coral, where white fails contrast. Use a deep wine or brown, or deepen the coral to a red before using white.

### What is the difference between coral and salmon?

Salmon is paler, pinker and slightly dustier. Coral is brighter, more saturated and leans more towards orange.