Degradê Pastel

11 degradês de pastel prontos, com o código CSS para copiar: do Canário ao Lavanda (Floral), pastel com branco e com preto e pastel com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#FFFF99
#00DAED
#B57EDC

Canário para Lavanda (Floral)

Com #00DAED no meio: só com as duas pontas, o centro ficaria acinzentado (#DABFBB).

#FFFF99
#FED8B1
#89CFF0
#B57EDC

Pastel Tom Sobre Tom

Quatro tons de pastel: Canário, Laranja-Claro, Azul Bebê, Lavanda (Floral).

#FFB347
#FFFFFF

Laranja-Pastel para Branco

Clareia até o branco.

#FFB347
#000000

Laranja-Pastel para Preto

Escurece até o preto.

#FFFF99
#F0E68C

Canário para Khaki

Canário e Khaki quase não mudam de claridade: o degradê troca só o matiz.

#F0E68C
#F2BDCD

Khaki para Rosa Orquídea

Khaki e Rosa Orquídea quase não mudam de claridade: o degradê troca só o matiz.

#F2BDCD
#D19FE8

Rosa Orquídea para Ube Brilhante

Rosa Orquídea e Ube Brilhante quase não mudam de claridade: o degradê troca só o matiz.

#FFB347
#C0C0C0

Laranja-Pastel para Prata

Laranja-Pastel com uma das cores que combinam com ele.

#FFB347
#FFD700

Laranja-Pastel para Dourado

Laranja-Pastel com uma das cores que combinam com ele.

#FFB347
#D5085B
#000080

Laranja-Pastel para Azul-Marinho

Com #D5085B no meio: só com as duas pontas, o centro ficaria acinzentado (#805A64).

#FFEBCD
#FFB347
#B57EDC

Pastel Radial

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

Códigos CSS dos Degradês de Pastel

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

Degradê CSS
Canário para Lavanda (Floral) linear-gradient(90deg, #FFFF99 0%, #00DAED 50%, #B57EDC 100%)
Pastel Tom Sobre Tom linear-gradient(180deg, #FFFF99 0%, #FED8B1 33%, #89CFF0 67%, #B57EDC 100%)
Laranja-Pastel para Branco linear-gradient(90deg, #FFB347 0%, #FFFFFF 100%)
Laranja-Pastel para Preto linear-gradient(180deg, #FFB347 0%, #000000 100%)
Canário para Khaki linear-gradient(135deg, #FFFF99 0%, #F0E68C 100%)
Khaki para Rosa Orquídea linear-gradient(135deg, #F0E68C 0%, #F2BDCD 100%)
Rosa Orquídea para Ube Brilhante linear-gradient(135deg, #F2BDCD 0%, #D19FE8 100%)
Laranja-Pastel para Prata linear-gradient(90deg, #FFB347 0%, #C0C0C0 100%)
Laranja-Pastel para Dourado linear-gradient(90deg, #FFB347 0%, #FFD700 100%)
Laranja-Pastel para Azul-Marinho linear-gradient(90deg, #FFB347 0%, #D5085B 50%, #000080 100%)
Pastel Radial radial-gradient(circle at center, #FFEBCD 0%, #FFB347 50%, #B57EDC 100%)

Como Usar o Degradê Pastel

Os degradês desta página usam 76 tons de pastel com nome, do Canário (#FFFF99) ao Lavanda (Floral) (#B57EDC).

No degradê Canário para Lavanda (Floral), 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,0: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ê Canário para Lavanda (Floral), seria #DABFBB. Neles, uma terceira cor no centro (no primeiro, #00DAED), 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 pastel e as paletas com pastel, com nome e código, ou monte o seu degradê no Criador de Gradiente, que já abre com três tons de pastel. O guia Degradê de cores: como criar um gradiente bonito explica os tipos linear, radial e cônico.