Degradê Roxo

11 degradês de roxo prontos, com o código CSS para copiar: do Cardo ao Roxo-Escuro, roxo com branco e com preto e roxo com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.
#D8BFD8
#301934

Cardo para Roxo-Escuro

Do tom mais claro ao mais escuro de roxo.

#D8BFD8
#B768A2
#5946B2
#301934

Roxo Tom Sobre Tom

Quatro tons de roxo: Cardo, Roxo Perolado, Roxo Encorpado, Roxo-Escuro.

#800080
#FFFFFF

Roxo (Púrpura) para Branco

Clareia até o branco.

#800080
#000000

Roxo (Púrpura) para Preto

Escurece até o preto.

#D8BFD8
#9370DB

Cardo para Roxo Médio

O Cardo é 25 pontos mais claro que o Roxo Médio (L* de 80 contra 55).

#9370DB
#8E4585

Roxo Médio para Ameixa

O Roxo Médio é 14 pontos mais claro que o Ameixa (L* de 55 contra 41).

#8E4585
#682860

Ameixa para Roxo Palatino

O Ameixa é 13 pontos mais claro que o Roxo Palatino (L* de 41 contra 28).

#800080
#FFD700

Roxo (Púrpura) para Dourado

Roxo (Púrpura) com uma das cores que combinam com ele.

#800080
#FFFF00

Roxo (Púrpura) para Amarelo

Roxo (Púrpura) com uma das cores que combinam com ele.

#800080
#808080

Roxo (Púrpura) para Cinza

Roxo (Púrpura) com uma das cores que combinam com ele.

#D473D4
#800080
#301934

Roxo Radial

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

Códigos CSS dos Degradês de Roxo

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

Degradê CSS
Cardo para Roxo-Escuro linear-gradient(90deg, #D8BFD8 0%, #301934 100%)
Roxo Tom Sobre Tom linear-gradient(180deg, #D8BFD8 0%, #B768A2 33%, #5946B2 67%, #301934 100%)
Roxo (Púrpura) para Branco linear-gradient(90deg, #800080 0%, #FFFFFF 100%)
Roxo (Púrpura) para Preto linear-gradient(180deg, #800080 0%, #000000 100%)
Cardo para Roxo Médio linear-gradient(135deg, #D8BFD8 0%, #9370DB 100%)
Roxo Médio para Ameixa linear-gradient(135deg, #9370DB 0%, #8E4585 100%)
Ameixa para Roxo Palatino linear-gradient(135deg, #8E4585 0%, #682860 100%)
Roxo (Púrpura) para Dourado linear-gradient(90deg, #800080 0%, #FFD700 100%)
Roxo (Púrpura) para Amarelo linear-gradient(90deg, #800080 0%, #FFFF00 100%)
Roxo (Púrpura) para Cinza linear-gradient(90deg, #800080 0%, #808080 100%)
Roxo Radial radial-gradient(circle at center, #D473D4 0%, #800080 50%, #301934 100%)

Como Usar o Degradê Roxo

Os degradês desta página usam 45 tons de roxo com nome, do Cardo (#D8BFD8) ao Roxo-Escuro (#301934).

No degradê Cardo para Roxo-Escuro, o texto branco só passa de 4,5:1 de contraste (o mínimo para leitura, pela WCAG) a partir de 50% 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 roxo e a complementar, ponha uma terceira cor no centro.

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