Degradê Laranja

11 degradês de laranja prontos, com o código CSS para copiar: do Mamão Creme ao Fusco, laranja com branco e com preto e laranja com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.

#FFEFD5

#87421F

Mamão Creme para Fusco

Do tom mais claro ao mais escuro de laranja.

#FFEFD5

#C1B8A8

#FF6E4A

#87421F

Laranja Tom Sobre Tom

Quatro tons de laranja: Mamão Creme, Antílope, Laranja Exuberante, Fusco.

#FFA500

#FFFFFF

Laranja para Branco

Clareia até o branco.

#FFA500

#000000

Laranja para Preto

Escurece até o preto.

#FFEFD5

#FFB347

Mamão Creme para Laranja-Pastel

O Mamão Creme é 17 pontos mais claro que o Laranja-Pastel (L* de 95 contra 78).

#FFB347

#ED872D

Laranja-Pastel para Laranja Cádmio

O Laranja-Pastel é 12 pontos mais claro que o Laranja Cádmio (L* de 78 contra 66).

#ED872D

#9F8170

Laranja Cádmio para Castor

Laranja Cádmio e Castor quase não mudam de claridade: o degradê troca só o matiz.

#FFA500

#CE0057

#000080

Laranja para Azul-Marinho

Com #CE0057 no meio: só com as duas pontas, o centro ficaria acinzentado (#805340).

#FFA500

#FF5492

#4169E1

Laranja para Azul Royal

Com #FF5492 no meio: só com as duas pontas, o centro ficaria acinzentado (#A08771).

#FFA500

#F5F5DC

Laranja para Bege

Laranja com uma das cores que combinam com ele.

#E3DAC9

#FFA500

#967117

Laranja Radial

Do centro para as bordas, o tom claro no meio.

Códigos CSS dos Degradês de Laranja

Toque na linha para copiar o CSS do degradê laranja.

Degradê	CSS
Mamão Creme para Fusco	`linear-gradient(90deg, #FFEFD5 0%, #87421F 100%)`
Laranja Tom Sobre Tom	`linear-gradient(180deg, #FFEFD5 0%, #C1B8A8 33%, #FF6E4A 67%, #87421F 100%)`
Laranja para Branco	`linear-gradient(90deg, #FFA500 0%, #FFFFFF 100%)`
Laranja para Preto	`linear-gradient(180deg, #FFA500 0%, #000000 100%)`
Mamão Creme para Laranja-Pastel	`linear-gradient(135deg, #FFEFD5 0%, #FFB347 100%)`
Laranja-Pastel para Laranja Cádmio	`linear-gradient(135deg, #FFB347 0%, #ED872D 100%)`
Laranja Cádmio para Castor	`linear-gradient(135deg, #ED872D 0%, #9F8170 100%)`
Laranja para Azul-Marinho	`linear-gradient(90deg, #FFA500 0%, #CE0057 50%, #000080 100%)`
Laranja para Azul Royal	`linear-gradient(90deg, #FFA500 0%, #FF5492 50%, #4169E1 100%)`
Laranja para Bege	`linear-gradient(90deg, #FFA500 0%, #F5F5DC 100%)`
Laranja Radial	`radial-gradient(circle at center, #E3DAC9 0%, #FFA500 50%, #967117 100%)`

Como Usar o Degradê Laranja

Os degradês desta página usam 59 tons de laranja com nome, do Mamão Creme (#FFEFD5) ao Fusco (#87421F).

No degradê Mamão Creme para Fusco, o texto branco só passa de 4,5:1 de contraste (o mínimo para leitura, pela WCAG) a partir de 80% do caminho. Antes disso, use texto preto (18,6:1 na ponta clara) ou deixe o texto do lado escuro.

Em 2 dos degradês com outra cor, o meio feito pelo navegador fica acinzentado: no degradê Laranja para Azul-Marinho, seria #805340. Neles, uma terceira cor no centro (no primeiro, #CE0057), calculada no espaço LCH, mantém o degradê vivo. Vale o mesmo para qualquer par de cores distantes na roda de cores.

Para outros tons, veja os tons de laranja e as paletas com laranja, com nome e código, ou monte o seu degradê no Criador de Gradiente, que já abre com três tons de laranja. O guia Degradê de cores: como criar um gradiente bonito explica os tipos linear, radial e cônico.