# Gradiente coral: códigos vivos entre o rosa e o laranja

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

O coral vive exatamente onde o rosa vira laranja, o que lhe dá o calor de um e o charme do outro. É vivo, simpático e surpreendentemente difícil para colocar texto em cima. Aqui estão os códigos e as soluções.

## The short version

- Um gradiente coral mistura laranjas quentes e rosados, geralmente puxando para o rosa numa ponta e para a tangerina ou o pêssego na outra.
- A cor nomeada coral do CSS é #ff7f50, um coral vivo que puxa para o laranja.
- Coral e verde-azulado são quase opostos, então uma mistura direta entre eles fica cinza; use o verde-azulado como uma área separada ou como destaque.
- Texto branco falha sobre coral vivo; use um vinho ou marrom profundo como #3b0d0c, ou leve o texto branco para um coral avermelhado profundo.
- O coral combina com campanhas de verão, comida e bebida, beleza, fitness e apps de consumo simpáticos.

Um **gradiente coral** mistura laranjas quentes e rosados, as cores onde o rosa vira laranja. Puxe para o rosa e ele fica charmoso e fresco; puxe para a tangerina e fica ensolarado e enérgico. O coral é alegre e muito visível, o que o torna um favorito para verão, comida, beleza e fitness. Suas duas armadilhas são uma faixa cinza quando ele encontra o verde-azulado e um texto que desaparece sobre ele. As duas são fáceis de evitar quando você as conhece.

## Coral, salmão, pêssego e melancia

Os laranjas quentes e rosados têm muitos nomes. Vale a pena separá-los, porque a palavra certa ajuda a escolher as paradas certas e a descrever o que você quer para um designer ou para o Designer do Gradiently.

| Cor | Hex típico | Personalidade |
| --- | --- | --- |
| Coral | `#ff7f50` | Vivo e quente, puxando para o laranja |
| Living coral | `#ff6f61` | Coral mais rosado e suave |
| Salmão | `#fa8072` | Mais claro e rosado, um pouco empoeirado |
| Pêssego | `#ffcba4` | Bem mais claro, mais laranja, delicado |
| Melancia | `#fb7185` | Mais rosado e frio, divertido |

O coral é o mais vivo deles. Seus vizinhos são paradas úteis num gradiente coral.

## Gradientes coral vibrantes

Este é o coral no seu ponto mais vivo. Ele prende a atenção até em tamanho de miniatura, e é por isso que funciona tão bem em posts de promoção, lançamentos, aulas de fitness e qualquer coisa que você queira que seja notada num feed cheio.

- Coral clássico: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Living coral: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)`
- Ponche tropical: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)`
- Flor de coral: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)`
- Pôr do sol coral: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)`

Cinco misturas de coral vibrante. Cada cor parceira é uma vizinha próxima, então as misturas continuam saturadas.

Algumas formas de usá-los: o “Coral clássico” atrás de uma única frase como “Abrimos ao meio-dia” num story de 1080×1920; o “Ponche tropical” como capa de um cardápio de drinks de verão; o “Pôr do sol coral” descendo por um pin do Pinterest de 1000×1500 para um guia de férias. O coral é forte, então deixe-o preencher o quadro e mantenha todo o resto simples: um título, um detalhe, bastante espaço.

## Gradientes coral do rosa ao laranja

### Coral puxando para o rosa

Leve o coral para o rosa e o blush e ele fica mais suave e romântico, ideal para beleza, floriculturas, casamentos e marcas de lifestyle. Para o lado mais rosado da família, veja [gradientes rosa](https://gradiently.design/pt-br/guide/pink-gradient).

- Coral rosado: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)`
- Blush salmão: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)`
- Coral melancia: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)`

Corais puxando para o rosa parecem mais suaves e combinam com marcas de beleza e lifestyle.

### Coral puxando para o laranja

Leve para o outro lado, rumo ao damasco e à tangerina, e o coral fica mais ensolarado e barulhento: cardápios de verão, casas de smoothie, férias. [Gradientes laranja e rosa](https://gradiently.design/pt-br/guide/orange-pink-gradient) cobre toda a faixa entre os dois.

- Coral damasco: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)`
- Do coral à tangerina: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)`
- Bar de praia: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)`

Corais puxando para o laranja são mais ensolarados, mais enérgicos e feitos para o verão.

## Coral e verde-azulado sem o meio cinza

Coral e verde-azulado formam uma das grandes duplas: quente contra frio, recife contra mar. Mas eles ficam quase opostos no círculo cromático, então uma mistura direta entre os dois passa por um cinza apagado no meio. A solução é mantê-los separados. Use o verde-azulado como fundo com uma luz coral, o coral como fundo com um destaque verde-azulado, ou ligue os dois por tons muito claros. [Gradientes lamacentos](https://gradiently.design/pt-br/guide/muddy-gradients) explica por que o meio fica cinza.

- Evite: meio cinza: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Sol coral sobre verde-azulado: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Passando pelo branco concha: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

A primeira mistura fica cinza no meio. As outras duas mantêm coral e verde-azulado como cores separadas, ou os unem por um tom claro.

Num cardápio ou pôster, experimente um verde-azulado bem escuro como `#042f2e` com títulos e botões em coral. Ali o coral chega a cerca de 5,8 para 1, muito melhor do que branco sobre coral, e o resultado é ousado e veranil. O lado verde-azulado está em [gradientes verde-azulados](https://gradiently.design/pt-br/guide/teal-gradient).

## Coral sobre um fundo escuro

O coral brilha lindamente contra ameixa profundo, azul-marinho ou quase preto. Uma única luz coral sobre um fundo escuro lembra um letreiro neon ou um pôr do sol no mar, e combina com bares, música, vida noturna e eventos à noite. Mantenha a luz coral longe de onde as palavras ficam e coloque o texto em branco concha ou branco sobre a área escura.

- Coral sobre vinho: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Pôr do sol na baía: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)`
- Carvão e coral: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)`

Uma luz coral, bastante escuro. O coral parece mais brilhante do que pareceria sobre o branco.

## Texto sobre um gradiente coral

O coral parece forte o bastante para texto branco, e é exatamente por isso que tantos designs em coral falham. Branco sobre `#ff7f50` mede cerca de 2,5 para 1, bem abaixo dos 4,5 para 1 exigidos para texto corrido. Um marrom vinho profundo como `#3b0d0c` mede cerca de 6,7 para 1 sobre o mesmo coral e mantém o calor. Se você quer texto branco, aprofunde o coral até um vermelho como `#e11d48`, onde o branco chega a cerca de 4,7 para 1. O método está em [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

Um post de promoção de um estúdio de pilates com texto claro sobre a parte mais viva de um gradiente coral

Palavras claras direto sobre o coral vivo parecem ousadas, mas são difíceis de ler no celular à luz do dia.

O mesmo post de pilates com texto nítido sobre uma área mais calma e profunda do gradiente coral

O mesmo post com uma área mais calma e uma cor de texto que combina com ela.

Um Mark do Gradiently faz esse ajuste sozinho: ele move sua região mais calma e de melhor contraste para trás das suas palavras, e a tinta automática escolhe texto claro ou escuro em cada linha a partir da própria paleta do Mark. Sem caixas nem sombras.

## CSS de gradiente coral para um botão

O coral rende uma chamada para ação simpática. Mantenha o gradiente claro o bastante para que um rótulo escuro continue legível, e deslize a posição no hover em vez de trocar as cores. [Botões com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-button) traz mais padrões.

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

Uma pílula coral com texto vinho profundo. O gradiente desliza no hover em vez de mudar de cor.

## FAQ

### Qual é o código hex do coral?

A cor nomeada `coral` do CSS é `#ff7f50`. O Living Coral da Pantone costuma ser aproximado como `#ff6f61`.

### Quais cores combinam com um gradiente coral?

Pêssego, rosa, tangerina e dourado se misturam a ele. Verde-azulado profundo, azul-marinho e ameixa são parceiros fortes quando ficam em áreas separadas.

### Por que meu gradiente coral e verde-azulado fica cinza?

Coral e verde-azulado ficam quase opostos no círculo cromático, então as cores entre eles perdem saturação. Mantenha os dois separados ou ligue-os por um tom claro.

### Posso usar texto branco sobre coral?

Não sobre coral vivo, onde o branco falha no contraste. Use um vinho ou marrom profundo, ou aprofunde o coral até um vermelho antes de usar branco.

### Qual a diferença entre coral e salmão?

O salmão é mais claro, mais rosado e um pouco mais empoeirado. O coral é mais vivo, mais saturado e puxa mais para o laranja.