Degradê Amarelo

10 degradês de amarelo prontos, com o código CSS para copiar: do Amarelo Claro Suave ao Amarelo-Escuro, amarelo com branco e com preto e amarelo com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#FFFFE0
#BA8E23

Amarelo Claro Suave para Amarelo-Escuro

Do tom mais claro ao mais escuro de amarelo.

#FFFFE0
#FBEC5D
#F4CA16
#BA8E23

Amarelo Tom Sobre Tom

Quatro tons de amarelo: Amarelo Claro Suave, Milho, Amarelo-Junco, Amarelo-Escuro.

#FFFF00
#FFFFFF

Amarelo para Branco

Clareia até o branco.

#FFFF00
#000000

Amarelo para Preto

Escurece até o preto.

#F0EAD6
#EEDD82

Casca de Ovo para Amarelo Palha

Casca de Ovo e Amarelo Palha quase não mudam de claridade: o degradê troca só o matiz.

#EEDD82
#BDB76B

Amarelo Palha para Khaki Escuro

O Amarelo Palha é 14 pontos mais claro que o Khaki Escuro (L* de 88 contra 73).

#FFFF00
#808080

Amarelo para Cinza

Amarelo com uma das cores que combinam com ele.

#FFFF00
#FF234C
#000080

Amarelo para Azul-Marinho

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

#FFFF00
#FF929C
#4169E1

Amarelo para Azul Royal

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

#FFFF73
#FFFF00
#CECCC3

Amarelo Radial

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

Códigos CSS dos Degradês de Amarelo

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

Degradê CSS
Amarelo Claro Suave para Amarelo-Escuro linear-gradient(90deg, #FFFFE0 0%, #BA8E23 100%)
Amarelo Tom Sobre Tom linear-gradient(180deg, #FFFFE0 0%, #FBEC5D 33%, #F4CA16 67%, #BA8E23 100%)
Amarelo para Branco linear-gradient(90deg, #FFFF00 0%, #FFFFFF 100%)
Amarelo para Preto linear-gradient(180deg, #FFFF00 0%, #000000 100%)
Casca de Ovo para Amarelo Palha linear-gradient(135deg, #F0EAD6 0%, #EEDD82 100%)
Amarelo Palha para Khaki Escuro linear-gradient(135deg, #EEDD82 0%, #BDB76B 100%)
Amarelo para Cinza linear-gradient(90deg, #FFFF00 0%, #808080 100%)
Amarelo para Azul-Marinho linear-gradient(90deg, #FFFF00 0%, #FF234C 50%, #000080 100%)
Amarelo para Azul Royal linear-gradient(90deg, #FFFF00 0%, #FF929C 50%, #4169E1 100%)
Amarelo Radial radial-gradient(circle at center, #FFFF73 0%, #FFFF00 50%, #CECCC3 100%)

Como Usar o Degradê Amarelo

Os degradês desta página usam 61 tons de amarelo com nome, do Amarelo Claro Suave (#FFFFE0) ao Amarelo-Escuro (#BA8E23).

No degradê Amarelo Claro Suave para Amarelo-Escuro, o texto branco não chega a 4,5:1 (o mínimo para leitura, pela WCAG) em nenhum ponto; o máximo é 3,0:1, na ponta escura. Use texto preto, que tem 20,6:1 na ponta clara, ou ponha o texto numa faixa sólida.

Em 2 dos degradês com outra cor, o meio feito pelo navegador fica acinzentado: no degradê Amarelo para Azul-Marinho, seria #808040. Neles, uma terceira cor no centro (no primeiro, #FF234C), 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 amarelo e as paletas com amarelo, com nome e código, ou monte o seu degradê no Criador de Gradiente, que já abre com três tons de amarelo. O guia Degradê de cores: como criar um gradiente bonito explica os tipos linear, radial e cônico.