Coral gradient: lively codes between pink and orange

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.

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.

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.

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 covers the full span between the two.

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 explains why the middle goes grey.

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.

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.

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.

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 has more patterns.

.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%;
}