# Gradiente laranja: 25 códigos quentes do pêssego ao queimado

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

O laranja é uma das cores mais quentes que se pode pôr num ecrã, e uma das mais fáceis de falhar. Aqui ficam 25 misturas para copiar, agrupadas por ambiente, e as combinações e regras de texto que as fazem funcionar.

## The short version

- Um gradiente laranja lê-se quente, simpático e enérgico, e muda de ambiente de forma acentuada consoante os laranjas sejam mais claros ou mais escuros.
- O laranja mistura-se limpamente com os seus vizinhos: amarelo, âmbar, vermelho, rosa e castanho.
- Misturar o laranja diretamente com azul ou azul-petróleo costuma dar um meio cinzento ou turvo, por isso mantém as cores complementares como destaque separado.
- O texto branco falha o contraste sobre laranja vivo como #f97316; usa aí texto quase preto ou castanho profundo, ou passa o texto branco para laranja queimado ou mais escuro.
- Os fundos escuros com uma única luz laranja parecem premium, enquanto as misturas de pêssego pálido servem marcas gentis e do dia a dia.

Um **gradiente laranja** mistura dois ou mais laranjas, muitas vezes com um amarelo, vermelho ou rosa vizinho, e poucas misturas parecem mais quentes. As versões de pêssego claro e alperce parecem suaves e acolhedoras, a tangerina viva parece ruidosa e brincalhona, e o laranja queimado ou ferrugem parece terroso e adulto. Abaixo estão 25 códigos agrupados por esses ambientes, seguidos do que lhes combinar e de como compor texto sobre eles sem perder as palavras.

## Gradientes laranja suaves: pêssego e alperce

Os laranjas pálidos são a forma mais simpática de entrar na cor. Ficam perto da pele, do pão e da luz do fim da tarde, e é por isso que as padarias, os cuidados de pele e as marcas infantis se apoiam neles. Mantém a paragem mais clara quase creme, para a mistura ter um sítio calmo onde descansar. Para um artigo inteiro sobre o extremo mais pálido, vê [gradientes pêssego](https://gradiently.design/pt-pt/guide/peach-gradient).

- Do creme ao alperce: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Alperce suave: `linear-gradient(160deg, #ffedd5 0%, #fdba74 100%)`
- Pele de pêssego: `linear-gradient(135deg, #fde2cf 0%, #fbb995 55%, #f6a07a 100%)`
- Brilho da manhã: `radial-gradient(circle at 30% 25%, #fff1e0 0%, #fcd5b0 50%, #f8b98a 100%)`
- Da manteiga ao melão: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Cinco gradientes laranja pálidos. Cada um começa perto do creme, por isso há sempre uma zona calma para texto escuro.

## Gradientes laranja vivos: tangerina e citrinos

O laranja saturado é pura energia. Serve promoções, entrega de comida, desporto, festivais e tudo o que tem de ser notado em tamanho de miniatura. O risco é o laranja vivo achatar-se num único bloco ruidoso, por isso dá-lhe uma paragem mais clara para o amarelo ou uma mais profunda para o vermelho. Essa pequena mudança é o que o faz parecer luz e não tinta.

- Tangerina: `linear-gradient(135deg, #fdba74 0%, #f97316 100%)`
- Explosão cítrica: `linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #ea580c 100%)`
- Do laranja à melancia: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Ponto quente: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Do laranja ao limão: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Os laranjas vivos funcionam melhor com uma paragem que se incline para o amarelo ou o rosa. A mistura lê-se então como luz, não como um preenchimento liso.

## Gradientes laranja de pôr do sol e âmbar

Correr o laranja na vertical, do dourado no topo ao vermelho ou ameixa em baixo, dá um pôr do sol, provavelmente o gradiente mais familiar que existe. As misturas âmbar são o primo mais calado: tons de mel, doce de laranja e uísque que parecem ricos sem gritar. Se queres o tratamento completo do céu, [gradientes de pôr do sol](https://gradiently.design/pt-pt/guide/sunset-gradient) vai mais longe.

- Pôr do sol clássico: `linear-gradient(180deg, #fcd34d 0%, #f97316 50%, #be123c 100%)`
- Crepúsculo: `linear-gradient(180deg, #fdba74 0%, #f472b6 55%, #7c3aed 100%)`
- Âmbar de mel: `linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #b45309 100%)`
- Doce de laranja: `linear-gradient(160deg, #fb923c 0%, #c2410c 60%, #7c2d12 100%)`
- Última luz: `linear-gradient(180deg, #f59e0b 0%, #dc2626 60%, #450a0a 100%)`

As misturas verticais leem-se como céu. Põe a cor mais clara no topo e a cor do horizonte em baixo.

## Gradientes laranja queimado e ferrugem

Empurra o laranja para o castanho e torna-se terracota, ferrugem e cobre: cores de potes de barro, folhas de outono e couro velho. Parecem artesanais e ponderadas, por isso servem interiores, café, cerâmica, marcas de exterior e tudo o que tenha uma história feita à mão. Também suportam muito melhor o texto branco do que o laranja vivo.

- Laranja queimado: `linear-gradient(135deg, #ea580c 0%, #9a3412 100%)`
- Terracota: `linear-gradient(160deg, #e07a4f 0%, #b4532a 55%, #7a3419 100%)`
- Cobre: `linear-gradient(135deg, #d97706 0%, #92400e 60%, #451a03 100%)`
- Ferrugem: `linear-gradient(180deg, #c2410c 0%, #7c2d12 100%)`
- Do barro à casca: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Os laranjas queimados ficam perto do castanho. São mais calmos, mais quentes e melhores atrás de texto branco.

## Luz laranja sobre fundo escuro

A forma mais premium de usar o laranja é com parcimónia. Parte de um quase preto, de um castanho profundo ou de um azul-marinho e deixa um laranja brilhar de um canto como uma brasa ou um candeeiro de rua. É o tratamento para eventos noturnos, restaurantes, música e tudo o que deva parecer quente depois de escurecer. As misturas escuras criam bandas com facilidade, por isso lê [fundos de gradiente escuros](https://gradiently.design/pt-pt/guide/dark-gradient-backgrounds) antes de exportares.

- Brasa: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Junto à lareira: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Candeeiro de rua sobre azul-marinho: `radial-gradient(circle at 75% 25%, #fdba74 0%, #ea580c 20%, #1e1b4b 65%, #0b0a1f 100%)`
- Carvão e cobre: `linear-gradient(200deg, #c2410c 0%, #3b1407 45%, #0c0a09 100%)`
- Brilho do horizonte: `radial-gradient(ellipse at 50% 110%, #f97316 0%, #9a3412 30%, #1c0f0a 70%)`

Uma luz laranja, muito escuro. O fundo faz o ambiente; o laranja só tem de brilhar.

## Cores que combinam com um gradiente laranja

O laranja tem dois tipos de bons parceiros. Os vizinhos como o amarelo, o rosa e o vermelho misturam-se diretamente com ele. Os opostos como o azul profundo e o azul-petróleo fazem-no vibrar, mas devem ficar ao lado do laranja como destaque, não dentro da mesma mistura, porque o ponto médio entre eles fica cinzento. [Gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) explica porquê, e [cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors) mostra como usar a atração em segurança.

- Creme: #fff7ed
- Alperce: #fdba74
- Tangerina: #f97316
- Ferrugem: #9a3412
- Tinta de casca: #431407
- Destaque azul profundo: #1e3a8a
- Destaque azul-petróleo: #0f766e

Uma paleta laranja prática: um fundo creme, três laranjas, um castanho escuro para o texto e dois destaques frios mantidos longe da mistura.

## Texto sobre gradientes laranja

É aqui que a maioria dos designs laranja falha. O branco sobre tangerina viva parece ousado mas tem uma razão de contraste de cerca de 2,8 para 1, bem abaixo dos 4,5 para 1 que as WCAG pedem para texto corrido. O quase preto sobre o mesmo laranja pontua acima de 6 para 1. A regra é simples: texto escuro sobre laranjas claros e vivos, texto branco só do laranja queimado para baixo. O método completo está em [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

| Fundo | Texto branco | Texto escuro #1c1917 |
| --- | --- | --- |
| Alperce `#fdba74` | Falha | Passa com folga |
| Tangerina `#f97316` | Cerca de 2,8:1, falha | Cerca de 6,2:1, passa |
| Laranja profundo `#ea580c` | Cerca de 3,6:1, só texto grande | Passa |
| Laranja queimado `#c2410c` | Cerca de 5,2:1, passa | Fraco |
| Ferrugem `#9a3412` | Cerca de 7,3:1, passa | Falha |

Contraste medido contra cor lisa. Num gradiente, testa o ponto mais claro atrás das tuas palavras.

Uma publicação de promoção de padaria com um gradiente laranja quente a correr mesmo atrás do título, que é difícil de ler

Quando o laranja mais vivo corre mesmo atrás do título, as palavras começam a lutar com a cor.

A mesma publicação de promoção de padaria com uma zona mais calma e profunda do gradiente atrás de um título nítido

A mesma publicação com uma zona mais calma atrás das palavras e a cor do texto escolhida para ela.

O Gradiently trata desta parte por ti. Um Mark sabe onde estão as palavras: move a sua zona mais calma para trás delas e a tinta automática escolhe texto claro ou escuro linha a linha a partir da paleta do próprio Mark, por isso um design laranja continua legível em todos os tamanhos sem caixas nem sombras.

## CSS de gradiente laranja

Cada código acima é um único valor CSS que podes colar em `background`. Para uma secção que precisa de calor e profundidade, sobrepõe uma luz radial a uma base linear e define sempre uma cor sólida de reserva. Lê [gradientes lineares em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient) para a sintaxe completa.

```css
.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}
```

Uma luz de alperce vivo sobre uma base de tangerina a ferrugem. Põe o título em baixo e à esquerda, onde a cor é mais profunda.

Se queres um visual laranja que mais ninguém esteja a publicar, explora o Mercado por Marks quentes: procura palavras como “laranja queimado” ou “alperce”, desenha de graça com qualquer um por reivindicar e reivindica-o se se tornar a tua marca.

## FAQ

### Que cores combinam bem com um gradiente laranja?

O amarelo, o rosa, o vermelho e o castanho misturam-se diretamente com o laranja. O azul profundo e o azul-petróleo dão bons destaques, mas mantém-nos ao lado do laranja e não dentro da mesma mistura.

### Qual é o código hex do laranja queimado?

Não há um único código oficial, mas `#c2410c` e `#cc5500` são ambos muito usados. Um gradiente de laranja queimado como `linear-gradient(135deg, #ea580c, #9a3412)` dá-lhe profundidade.

### Posso pôr texto branco num gradiente laranja?

Só nos laranjas mais escuros. O branco sobre tangerina viva falha o contraste, por isso usa aí quase preto e guarda o texto branco para laranja queimado, ferrugem e mais escuro.

### Porque é que o meu gradiente laranja e azul parece cinzento no meio?

O laranja e o azul ficam opostos na roda de cores, por isso as cores entre eles perdem saturação. Junta uma paragem de rosa ou roxo entre eles, ou mantém-nos como zonas separadas.

### O que diz um gradiente laranja sobre uma marca?

O laranja costuma ler-se como quente, simpático, brincalhão e acessível. As versões mais escuras e queimadas deslocam isso para ofício e confiança.