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

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

O laranja é uma das cores mais quentes que você pode pôr numa tela e uma das mais fáceis de errar. Aqui estão 25 misturas para copiar, agrupadas por clima, mais as combinações e regras de texto que as fazem funcionar.

## The short version

- Um degradê laranja parece quente, simpático e enérgico, e muda bruscamente de clima conforme os laranjas sejam mais claros ou mais escuros.
- O laranja se mistura limpo aos seus vizinhos: amarelo, âmbar, vermelho, rosa e marrom.
- Misturar o laranja direto com azul ou azul-petróleo costuma produzir um meio cinza ou barrento, então mantenha as cores complementares como acento separado.
- Texto branco falha no contraste sobre laranja vivo como #f97316; use texto quase preto ou marrom escuro ali, ou leve o branco para o laranja queimado ou mais escuro.
- Fundos escuros com uma única luz laranja parecem premium, enquanto misturas pêssego claras combinam com marcas gentis e do dia a dia.

Um **degradê laranja** mistura dois ou mais laranjas, muitas vezes com um amarelo, vermelho ou rosa vizinho, e poucas misturas parecem mais quentes. As versões pêssego e damasco claras parecem suaves e acolhedoras, a tangerina viva parece alta e brincalhona, e o laranja queimado ou a ferrugem parecem terrosos e adultos. Abaixo estão 25 códigos agrupados por esses climas, seguidos do que combinar com eles e de como compor texto sobre eles sem perder suas palavras.

## Degradês laranja suaves: pêssego e damasco

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 de tarde, e por isso padarias, cuidados com a pele e marcas infantis se apoiam neles. Mantenha a parada mais clara quase creme, para a mistura ter onde descansar. Para um artigo inteiro sobre a ponta mais pálida, veja [degradês pêssego](https://gradiently.design/pt-br/guide/peach-gradient).

- Creme para damasco: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%)`
- Damasco 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%)`
- Manteiga para melão: `linear-gradient(180deg, #fef3c7 0%, #fed7aa 50%, #fdba74 100%)`

Cinco degradês laranja pálidos. Cada um começa perto do creme, então sempre há uma área calma para texto escuro.

## Degradês laranja vivos: tangerina e cítrico

O laranja saturado é pura energia. Combina com promoções, delivery de comida, esporte, festivais e tudo que precisa ser notado no tamanho de miniatura. O risco é que o laranja vivo se achate num único bloco barulhento, então dê a ele uma parada mais clara em direção ao amarelo ou uma mais escura em direção ao 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%)`
- Laranja para melancia: `linear-gradient(120deg, #fb923c 0%, #f43f5e 100%)`
- Ponto quente: `radial-gradient(circle at 70% 30%, #fed7aa 0%, #fb923c 40%, #ea580c 100%)`
- Laranja para limão: `linear-gradient(90deg, #f97316 0%, #facc15 100%)`

Os laranjas vivos funcionam melhor com uma parada que puxe para o amarelo ou o rosa. A mistura então se lê como luz, não como um preenchimento chapado.

## Degradês laranja de pôr do sol e âmbar

Aplicar o laranja na vertical, do dourado no topo ao vermelho ou ameixa embaixo, dá um pôr do sol, provavelmente o degradê mais familiar que existe. As misturas âmbar são a prima mais quieta: tons de mel, geleia de laranja e uísque que parecem ricos sem gritar. Se você quer o tratamento completo do céu, [degradês de pôr do sol](https://gradiently.design/pt-br/guide/sunset-gradient) vai mais longe.

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

Misturas verticais se leem como céu. Ponha a cor mais clara no topo e a cor do horizonte embaixo.

## Degradês laranja queimado e ferrugem

Empurre o laranja para o marrom e ele vira terracota, ferrugem e cobre: cores de vasos de barro, folhas de outono e couro velho. Parecem artesanais e pensados, então combinam com interiores, café, cerâmica, marcas outdoor e tudo com uma história feita à mão. Também sustentam texto branco muito melhor 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%)`
- Argila para casca: `linear-gradient(135deg, #f4c7a1 0%, #c8703f 50%, #6b2f14 100%)`

Os laranjas queimados ficam perto do marrom. 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 moderação. Parta de um quase preto, um marrom profundo ou um marinho e deixe um laranja brilhar num canto, como uma brasa ou um poste de luz. É o tratamento para eventos noturnos, restaurantes, música e tudo que deve parecer quente depois de escurecer. Misturas escuras formam faixas com facilidade, então leia [fundos degradê escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds) antes de exportar.

- Brasa: `radial-gradient(circle at 80% 20%, #f97316 0%, #7c2d12 35%, #120806 75%)`
- Lareira: `radial-gradient(circle at 20% 80%, #fb923c 0%, #431407 45%, #0c0a09 85%)`
- Poste de luz sobre 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 clima; o laranja só precisa brilhar.

## Cores que combinam com um degradê laranja

O laranja tem dois tipos de bons parceiros. Vizinhos como amarelo, rosa e vermelho se misturam direto a ele. Opostos como azul profundo e azul-petróleo o fazem vibrar, mas devem ficar ao lado do laranja como acento, não dentro da mesma mistura, porque o ponto médio entre eles vira cinza. [Degradês barrentos](https://gradiently.design/pt-br/guide/muddy-gradients) explica por quê, e [cores complementares](https://gradiently.design/pt-br/guide/complementary-colors) mostra como usar essa atração com segurança.

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

Uma paleta laranja funcional: um fundo creme, três laranjas, um marrom escuro para o texto e dois acentos frios mantidos fora da mistura.

## Texto sobre degradês laranja

É aqui que a maioria dos designs laranja falha. 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 a WCAG pede para texto corrido. Quase preto sobre o mesmo laranja marca mais 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 cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

| Fundo | Texto branco | Texto escuro #1c1917 |
| --- | --- | --- |
| Damasco `#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ó para 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 chapada. Em um degradê, teste o ponto mais claro atrás das suas palavras.

Um post de promoção de padaria com um degradê laranja quente direto atrás do título, difícil de ler

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

O mesmo post de promoção de padaria com uma área mais calma e profunda do degradê atrás de um título nítido

O mesmo post com uma área mais calma atrás das palavras e a cor do texto escolhida para ela.

O Gradiently cuida dessa parte para você. Um Mark sabe onde estão as palavras: move sua região 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, então um design laranja continua legível em todos os tamanhos, sem caixas nem sombras.

## CSS de degradê laranja

Todo código acima é um único valor CSS que você pode colar em `background`. Para uma seção que precisa de calor e profundidade, sobreponha uma luz radial a uma base linear e sempre defina uma cor sólida de reserva. Leia [degradês lineares em CSS](https://gradiently.design/pt-br/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 damasco viva sobre uma base de tangerina para ferrugem. Coloque o título embaixo e à esquerda, onde a cor é mais profunda.

Se você quer um visual laranja que ninguém mais esteja publicando, navegue pelo Mercado atrás de Marks quentes: busque palavras como “laranja queimado” ou “damasco”, crie de graça com qualquer um ainda não reservado e reserve-o se virar a sua marca.

## FAQ

### Que cores combinam com um degradê laranja?

Amarelo, rosa, vermelho e marrom se misturam direto ao laranja. Azul profundo e azul-petróleo dão acentos fortes, mas mantenha-os ao lado do laranja, 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 muito usados. Um degradê laranja queimado como `linear-gradient(135deg, #ea580c, #9a3412)` dá profundidade.

### Posso pôr texto branco sobre um degradê laranja?

Só nos laranjas mais escuros. Branco sobre tangerina viva falha no contraste, então use quase preto ali e reserve o texto branco para laranja queimado, ferrugem e mais escuros.

### Por que meu degradê laranja e azul fica cinza no meio?

Laranja e azul ficam opostos na roda de cores, então as cores entre eles perdem saturação. Acrescente uma parada de rosa ou roxo entre eles, ou mantenha-os como áreas separadas.

### O que um degradê laranja diz sobre uma marca?

O laranja costuma ser lido como quente, simpático, brincalhão e acessível. Versões mais escuras e queimadas deslocam isso para artesanato e confiança.