Degradê Lilás

11 degradês de lilás prontos, com o código CSS para copiar: do Cardo ao Lilás Francês, lilás com branco e com preto e lilás com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#D8BFD8
#86608E

Cardo para Lilás Francês

Do tom mais claro ao mais escuro de lilás.

#D8BFD8
#C8A2C8
#AE98AA
#86608E

Lilás Tom Sobre Tom

Quatro tons de lilás: Cardo, Lilás, Lilás Lustroso, Lilás Francês.

#C8A2C8
#FFFFFF

Lilás para Branco

Clareia até o branco.

#C8A2C8
#000000

Lilás para Preto

Escurece até o preto.

#D8BFD8
#C8A2C8

Cardo para Lilás

Cardo e Lilás quase não mudam de claridade: o degradê troca só o matiz.

#C8A2C8
#A2A2D0

Lilás para Azul Bluebell

Lilás e Azul Bluebell quase não mudam de claridade: o degradê troca só o matiz.

#A2A2D0
#B784A7

Azul Bluebell para Malva Ópera

Azul Bluebell e Malva Ópera quase não mudam de claridade: o degradê troca só o matiz.

#C8A2C8
#C0C0C0

Lilás para Prata

Lilás com uma das cores que combinam com ele.

#C8A2C8
#98FF98

Lilás para Verde-Menta

Lilás com uma das cores que combinam com ele.

#C8A2C8
#FFFACD

Lilás para Amarelo-Claro

Lilás com uma das cores que combinam com ele.

#D8BFD8
#C8A2C8
#86608E

Lilás Radial

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

Códigos CSS dos Degradês de Lilás

Toque na linha para copiar o CSS do degradê lilás.

Degradê CSS
Cardo para Lilás Francês linear-gradient(90deg, #D8BFD8 0%, #86608E 100%)
Lilás Tom Sobre Tom linear-gradient(180deg, #D8BFD8 0%, #C8A2C8 33%, #AE98AA 67%, #86608E 100%)
Lilás para Branco linear-gradient(90deg, #C8A2C8 0%, #FFFFFF 100%)
Lilás para Preto linear-gradient(180deg, #C8A2C8 0%, #000000 100%)
Cardo para Lilás linear-gradient(135deg, #D8BFD8 0%, #C8A2C8 100%)
Lilás para Azul Bluebell linear-gradient(135deg, #C8A2C8 0%, #A2A2D0 100%)
Azul Bluebell para Malva Ópera linear-gradient(135deg, #A2A2D0 0%, #B784A7 100%)
Lilás para Prata linear-gradient(90deg, #C8A2C8 0%, #C0C0C0 100%)
Lilás para Verde-Menta linear-gradient(90deg, #C8A2C8 0%, #98FF98 100%)
Lilás para Amarelo-Claro linear-gradient(90deg, #C8A2C8 0%, #FFFACD 100%)
Lilás Radial radial-gradient(circle at center, #D8BFD8 0%, #C8A2C8 50%, #86608E 100%)

Como Usar o Degradê Lilás

O site tem 4 tons de lilás com nome; para os degradês, entram também cores próximas, como Uva Brilhante (#AB92B3) e Roxo Pastel (#C3B1E1). Vão do Cardo (#D8BFD8) ao Lilás Francês (#86608E).

No degradê Cardo para Lilás Francês, o texto branco só passa de 4,5:1 de contraste (o mínimo para leitura, pela WCAG) a partir de 90% do caminho. Antes disso, use texto preto (12,4:1 na ponta clara) ou deixe o texto do lado escuro.

Nenhum dos pares fica acinzentado no meio: as pontas de cada degradê estão perto na roda de cores ou uma delas é neutra (branco, preto ou cinza). Com cores opostas, como lilás e a complementar, ponha uma terceira cor no centro.

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