# Gradientes laranja e rosa: códigos quentes além do pôr do sol

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

O laranja e o rosa são vizinhos, o que faz deles uma das misturas mais quentes e mais fáceis que há. O desafio não é misturá-los; é não parecer cada predefinição de pôr do sol.

## The short version

- Um gradiente laranja e rosa mistura matizes quentes vizinhos como a tangerina #f97316, o coral #fb7185 e o rosa #ec4899, por isso a transição fica viva sem precisar de uma cor-ponte.
- O par está tão associado a pores do sol que uma simples diagonal do laranja ao rosa se lê como predefinição, e mudar o fundo ou a luminosidade evita isso.
- O laranja vivo e o rosa forte são ambos demasiado claros para texto branco pequeno, enquanto uma tinta de ferrugem profunda ou castanho queimado se lê bem nas versões mais suaves.
- As versões terrosas com terracota e rosa desbotado parecem calmas e adultas, e as versões escuras com brasa e framboesa parecem quentes e noturnas.
- O laranja e o rosa servem comida, bebida, beleza, campanhas de verão, viagens e qualquer marca que queira parecer quente e acolhedora.

Um **gradiente laranja e rosa** mistura dois vizinhos quentes: tangerina como `#f97316` ou pêssego como `#fed7aa` de um lado, rosa como `#ec4899` ou rosado como `#fda4af` do outro, normalmente com coral no meio. Como os matizes ficam lado a lado, a mistura nunca fica turva. O que pode ficar é previsível, porque a combinação é abreviatura de pôr do sol. Os códigos abaixo estão agrupados por ambiente, do pêssego suave à brasa escura, para escolheres uma versão que pareça tua e não um fundo de telemóvel.

## Cores entre o laranja e o rosa

Caminha do laranja ao rosa e passas por coral, salmão e melancia, todos saturados e quentes. Aclara o caminho e obténs alperce, pêssego e rosado. Escurece-o e obténs ferrugem, terracota e framboesa. A maioria dos bons gradientes laranja e rosa usa três paragens da mesma faixa de luminosidade em vez de um salto do pêssego pálido ao rosa forte.

- Creme: #fff7ed
- Pêssego: #fed7aa
- Rosado: #fda4af
- Alperce: #fb923c
- Coral: #fb7185
- Tangerina: #f97316
- Rosa forte: #ec4899
- Ferrugem: #9a3412
- Sombra queimada: #431407

A gama do laranja ao rosa, com um creme e dois castanhos escuros para fundos e texto.

## Gradientes suaves de pêssego e rosado

O laranja e o rosa pálidos juntos parecem pele, linho e luz do início da manhã. Isso torna-os uma escolha natural para cuidados de pele, noivas, bem-estar e padarias. Também ficam bem fotografados atrás de produtos, porque favorecem os tons quentes. Compõe o texto em ferrugem profundo e não em preto; mantém o calor.

- Linho de pêssego: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`
- Alperce rosado: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)`
- Primeira luz: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)`

Laranja e rosa suaves. A tinta ferrugem ou sombra queimada lê-se bem nos três. [Gradientes pêssego](https://gradiently.design/pt-pt/guide/peach-gradient) tem mais desta família.

## Gradientes de coral, toranja e melancia

O laranja e o rosa saturados são puro verão: sumo de toranja, toalhas de praia, cartazes de festival. São ruidosos o suficiente para parar o deslizar e simpáticos o suficiente para não parecerem agressivos. Mantém-nos longe de texto muito pequeno e dá-lhes um canto calmo.

- Da tangerina ao rosa: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`
- Toranja: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)`
- Melancia: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)`
- Batido de manga: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)`

Gradientes laranja e rosa vivos. Cada paragem é vizinha próxima da seguinte, por isso o meio continua vivo. [Gradientes coral](https://gradiently.design/pt-pt/guide/coral-gradient) vai mais fundo.

## Terracota terrosa e rosa desbotado

Atenua as duas cores e o par fica calmo e assente, a paleta de potes de barro, flores secas e paredes cozidas pelo sol. É a versão menos usada e muitas vezes a mais elegante. Combina bem com oliveira, areia e creme, e funciona ao lado de [paletas de tons terrosos](https://gradiently.design/pt-pt/guide/earth-tone-colors).

- Barro e rosa: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)`
- Crepúsculo de terracota: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)`
- Pétalas secas: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)`

Laranja e rosa atenuados. Parecem artesanais e calmos, e servem interiores, cerâmica, floristas e marcas de vida lenta.

> **Atrás de fotografias de produto** As misturas quentes e atenuadas favorecem pele, madeira, pão e cerâmica porque ecoam essas cores. Escolhe uma paragem do próprio produto e constrói o gradiente a partir dela. [Fundos para fotografias de produto](https://gradiently.design/pt-pt/guide/product-photo-backgrounds) mostra como.

## Gradientes escuros de brasa e framboesa

Parte de um fundo castanho profundo ou ameixa e deixa o laranja e o rosa brilharem a partir dele, e o par deixa de ser alegre para ficar íntimo: luz de velas, brasas, uma carta de cocktails. Estes suportam texto claro com facilidade, o que os torna práticos para cartazes de eventos e ofertas da noite.

- Brasa: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)`
- Da ferrugem à framboesa: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)`
- Última luz: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)`

Gradientes laranja e rosa escuros. Junta grão, porque as misturas quentes escuras criam bandas com facilidade.

## Como evitar o cliché do pôr do sol

O laranja ao rosa numa diagonal de 45 graus está em todo o lado, de fundos de telemóvel a ícones de aplicações, por isso lê-se como predefinição. Se queres o calor sem a predefinição, muda pelo menos uma das coisas abaixo. [Gradientes de pôr do sol](https://gradiently.design/pt-pt/guide/sunset-gradient) trata da versão literal, se for isso que queres.

### Predefinição

- Laranja forte a rosa forte, duas paragens
- Diagonal reta de 45 graus
- Cor espalhada por igual pelo enquadramento
- Texto branco sobre a parte mais brilhante

### Ponderado

- Primeiro um fundo: creme, barro ou brasa
- Luz de um canto com um gradiente radial
- Paragens desiguais, com uma cor a liderar
- Tinta ferrugem nas versões suaves, tinta creme nas escuras

## Cores de texto sobre laranja e rosa

O laranja é uma das cores saturadas mais claras, por isso o texto branco sobre tangerina ou alperce é mais fraco do que parece. O ferrugem profundo ou a sombra queimada é a tinta fiável nas versões suaves e vivas; o creme serve as escuras. As razões usam a fórmula das WCAG, em que 4,5:1 é o mínimo habitual para texto corrido e [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica o resto.

| Fundo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| Alperce `#fb923c` | Branco | 2,3:1 | Falha |
| Tangerina `#f97316` | Branco | 2,8:1 | Falha para a maioria do texto |
| Pêssego `#fed7aa` | Sombra queimada `#431407` | 11,6:1 | Excelente |
| Coral `#fb7185` | Sombra queimada `#431407` | 5,8:1 | Bom |
| Laranja profundo `#c2410c` | Branco | 5,2:1 | Bom |
| Framboesa `#be185d` | Branco | 6,0:1 | Bom |

Se o texto branco importa ao teu design, escurece as paragens por trás dele para laranja profundo ou framboesa.

Uma promoção vertical de bar com letras cor de creme sobre um gradiente escuro que brilha em laranja e framboesa

Uma promoção de bar em brasa a framboesa, com texto creme no lado escuro.

Uma publicação quadrada de cuidados de pele com letras castanho-escuras sobre um gradiente suave de pêssego e rosado

Uma publicação de cuidados de pele em pêssego e rosado com tinta sombra queimada.

## CSS de gradiente laranja e rosa

```css
.warm-hero {
  background-color: #fff7ed;
  background-image:
    radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%),
    linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%);
  color: #431407;
}
```

Um fundo creme com uma luz de coral em cima à direita e alperce em baixo à esquerda, e texto sombra queimada.

Sobrepor duas luzes radiais suaves a uma base pálida dá um calor muito mais natural do que uma única diagonal. Se queres um calor que seja inconfundivelmente teu, o Mercado do Gradiently deixa-te procurar Marks por palavras de cor como “coral” ou “pêssego”. Cada Mark é único, com exatamente um dono de cada vez, e depois de o reivindicares só tu podes exportar com ele.

## FAQ

### Qual é um bom código de gradiente laranja e rosa?

Um clássico vivo é `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Para uma versão mais suave, experimenta `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`.

### O laranja e o rosa combinam?

Sim. São vizinhos na roda de cores, com o coral pelo meio, por isso misturam-se limpamente e parecem quentes.

### Que cor de texto vai num gradiente laranja e rosa?

Um ferrugem profundo ou sombra queimada como `#431407` lê-se bem nas versões suaves e vivas. O branco só funciona nas paragens mais profundas, como `#c2410c` ou `#be185d`.

### Como faço um gradiente laranja e rosa parecer menos um pôr do sol?

Parte de um fundo como creme, barro ou uma brasa escura, ilumina-o a partir de um canto em vez de uma diagonal e deixa uma cor liderar.

### Que cor fica entre o laranja e o rosa?

O coral, por volta de `#fb7185`, com o salmão e a melancia como parentes próximos.