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

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

O coral vive exatamente onde o rosa se torna laranja, e por isso tem o calor de um e o encanto do outro. É vivo, simpático e surpreendentemente difícil de pôr texto por cima. Aqui ficam códigos e soluções.

## The short version

- Um gradiente coral mistura laranjas quentes e rosados, normalmente a inclinar para rosa numa ponta e para tangerina ou pêssego na outra.
- A cor CSS com nome coral é #ff7f50, um laranja vivo que puxa ao coral.
- Coral e azul-petróleo são quase opostos, por isso uma mistura direta entre eles fica cinzenta; usa o azul-petróleo como zona separada ou como destaque.
- O texto branco falha sobre coral vivo; usa um bordô ou castanho profundo, como #3b0d0c, ou passa o texto branco para um coral vermelho profundo.
- O coral combina com campanhas de verão, comida e bebida, beleza, fitness e aplicações de consumo simpáticas.

Um **gradiente coral** mistura laranjas quentes e rosados, as cores onde o rosa se torna laranja. Inclina-o para o rosa e parece encantador e fresco; inclina-o para a tangerina e parece solarengo e enérgico. O coral é alegre e muito visível, o que o torna favorito para o verão, a comida, a beleza e o fitness. As suas duas armadilhas são uma faixa cinzenta quando encontra o azul-petróleo e o texto que desaparece por cima. Ambas se evitam com facilidade depois de as conheceres.

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

Os laranjas quentes e rosados partilham muitos nomes. Vale a pena separá-los, porque a palavra certa ajuda-te a escolher as paragens certas e a descrever o que queres a um designer ou ao Designer do Gradiently.

| Cor | Hex típico | Carácter |
| --- | --- | --- |
| Coral | `#ff7f50` | Vivo e quente, a puxar ao laranja |
| Coral vivo | `#ff6f61` | Coral mais rosado e suave |
| Salmão | `#fa8072` | Mais pálido e rosado, ligeiramente empoeirado |
| Pêssego | `#ffcba4` | Muito mais claro, mais laranja, delicado |
| Melancia | `#fb7185` | Mais rosado e frio, brincalhão |

O coral é o mais vivo destes. Os vizinhos são boas paragens num gradiente coral.

## Gradientes coral vivos

Aqui está o coral no seu auge. Prendem a atenção em tamanho de miniatura, e por isso funcionam tão bem em publicações de saldos, lançamentos, aulas de fitness e tudo o que queiras que se note num feed cheio.

- Coral clássico: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)`
- Coral vivo: `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 vivo. Cada cor parceira é uma vizinha próxima, por isso as misturas ficam saturadas.

Algumas formas de os usar: o “Coral clássico” por trás de uma só frase como “Abrimos ao meio-dia” num story de 1080×1920; o “Ponche tropical” como capa de uma ementa de bebidas de verão; o “Pôr do sol coral” a descer num pin do Pinterest de 1000×1500 para um guia de férias. O coral é forte, por isso deixa-o encher o enquadramento e mantém tudo o resto na página simples: um título, um pormenor, muito espaço.

## Gradientes coral do rosa ao laranja

### Coral que puxa ao rosa

Empurra o coral para o rosa e o rubor e torna-se mais suave e romântico, ideal para beleza, floristas, casamentos e marcas de estilo de vida. Para o lado mais rosado da família, vê os [gradientes rosa](https://gradiently.design/pt-pt/guide/pink-gradient).

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

Os corais que puxam ao rosa são mais suaves e combinam com marcas de beleza e estilo de vida.

### Coral que puxa ao laranja

Empurra-o para o outro lado, para o alperce e a tangerina, e o coral fica mais solarengo e mais forte: ementas de verão, bares de batidos, férias. Os [gradientes laranja e rosa](https://gradiently.design/pt-pt/guide/orange-pink-gradient) cobrem todo o intervalo entre os dois.

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

Os corais que puxam ao laranja são mais solarengos, mais enérgicos e feitos para o verão.

## Coral e azul-petróleo sem o meio cinzento

Coral e azul-petróleo são um dos grandes pares: quente contra frio, recife contra mar. Mas ficam quase opostos na roda de cores, por isso uma mistura direta entre eles passa por um cinzento baço no meio. A solução é mantê-los separados. Usa o azul-petróleo como fundo com uma luz coral, o coral como fundo com um destaque azul-petróleo, ou faz a passagem por tons muito pálidos. Os [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients) explicam porque o meio fica cinzento.

- Evitar: meio cinzento: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)`
- Sol coral sobre azul-petróleo: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Pelo branco concha: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)`

A primeira mistura fica cinzenta no meio. As outras duas mantêm coral e azul-petróleo como cores separadas, ou unem-nos por um tom pálido.

Numa ementa ou cartaz, experimenta um azul-petróleo muito escuro como `#042f2e` com títulos e botões em coral. O coral chega aí a cerca de 5,8 para 1, muito melhor do que o branco sobre coral, e tem um ar arrojado e de verão. O lado azul-petróleo está tratado nos [gradientes azul-petróleo](https://gradiently.design/pt-pt/guide/teal-gradient).

## Coral sobre fundo escuro

O coral brilha de forma linda contra ameixa profunda, azul-marinho ou quase preto. Uma só luz coral sobre fundo escuro parece um néon ou um pôr do sol sobre o mar, e combina com bares, música, vida noturna e eventos ao fim do dia. Mantém a luz coral longe de onde ficam as palavras e escreve-as em concha pálido ou branco na zona escura.

- Coral sobre vinho: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)`
- Pôr do sol sobre a 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 e muito escuro. O coral lê-se mais brilhante do que sobre branco.

## Texto sobre um gradiente coral

O coral parece forte o bastante para letra branca, e é exatamente por isso que tantos designs em coral falham. O branco sobre `#ff7f50` mede cerca de 2,5 para 1, muito abaixo dos 4,5 para 1 pedidos em texto corrido. Um castanho-bordô profundo como `#3b0d0c` mede cerca de 6,7 para 1 sobre o mesmo coral e mantém o calor. Se queres letra branca, aprofunda o coral para um vermelho como `#e11d48`, onde o branco chega a cerca de 4,7 para 1. O método está em [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

Uma publicação de saldos de um estúdio de pilates com texto claro a atravessar a parte mais viva de um gradiente coral

Palavras claras a atravessar o coral vivo parecem fortes, mas são difíceis de ler num telemóvel à luz do dia.

A mesma publicação de pilates com texto legível numa zona mais calma e profunda do gradiente coral

A mesma publicação com uma zona mais calma e uma cor de letra que lhe assenta.

Um Mark do Gradiently faz este ajuste sozinho: move a sua região mais calma e de melhor contraste para trás das tuas palavras e a tinta automática escolhe letra clara ou escura para cada linha a partir da paleta do próprio Mark. Sem caixas nem sombras.

## CSS de gradiente coral para um botão

O coral dá um apelo à ação simpático. Mantém o gradiente claro o bastante para que uma etiqueta escura continue legível e desliza a sua posição ao passar o rato em vez de trocar de cor. Os [botões com gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-button) têm 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 bordô profundo. O gradiente desliza ao passar o rato em vez de mudar de cor.

## FAQ

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

A cor CSS com nome `coral` é `#ff7f50`. O Living Coral da Pantone costuma aproximar-se de `#ff6f61`.

### Que cores combinam com um gradiente coral?

Pêssego, rosa, tangerina e dourado fundem-se nele. Azul-petróleo profundo, azul-marinho e ameixa são bons parceiros quando mantidos como zonas separadas.

### Porque é que o meu gradiente coral e azul-petróleo fica cinzento?

Coral e azul-petróleo ficam quase opostos na roda de cores, por isso as cores intermédias perdem saturação. Mantém-nos separados ou une-os por um tom pálido.

### Posso usar texto branco sobre coral?

Não sobre coral vivo, onde o branco falha no contraste. Usa um bordô ou castanho profundo, ou aprofunda o coral para um vermelho antes de usar branco.

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

O salmão é mais pálido, mais rosado e ligeiramente mais empoeirado. O coral é mais vivo, mais saturado e puxa mais ao laranja.