Gradientes roxos: paletas, códigos e como usá-los

Um gradiente roxo mistura tons de violeta, roxo, ameixa ou lavanda, muitas vezes com um azul ou um rosa vizinho. É uma das cores de gradiente mais populares em sites, apps e posts sociais, porque o roxo parece imaginativo e um pouco luxuoso, e brilha lindamente numa tela escura. Abaixo estão paletas de gradiente roxo agrupadas por clima, cada uma com CSS para copiar, seguidas de como colocar texto sobre elas e de como evitar que fiquem iguais às de todo mundo.

A família do roxo: violeta, roxo, ameixa e lavanda

“Roxo” abrange uma faixa ampla. O violeta puxa para o azul e parece frio e elétrico. O magenta puxa para o rosa e parece quente e barulhento. O ameixa é um roxo profundo e avermelhado que parece rico; o lavanda é um roxo pálido e acinzentado que parece suave. Saber qual você quer facilita todas as outras escolhas.

O que um gradiente roxo transmite

Em boa parte da Europa e das Américas, o roxo é associado a criatividade, imaginação e luxo. A ligação com o luxo é histórica: durante séculos, o corante roxo foi raro e caro, então era usado pelos poderosos. Nos últimos anos, também se tornou uma das cores mais comuns na identidade visual de software e tecnologia, onde sugere algo inventivo sem a seriedade do azul. Em outros lugares as associações mudam; o guia de significados das cores pelo mundo traz os detalhes.

• Ferramentas e estúdios criativos: violeta e magenta parecem inventivos e um pouco divertidos.
• Beleza e bem-estar: lavandas e lilases parecem suaves e restauradores.
• Música, vida noturna e games: roxos profundos com um brilho vivo parecem noite.
• Produtos premium: ameixa e ametista quase preta parecem ricos, sobretudo com um destaque quente.

O preço é a familiaridade. Como muitas marcas de tecnologia usam um gradiente violeta, o seu precisa conquistar a diferença pela profundidade, pelo calor, pelo material ou pela consistência com que você o usa.

Gradientes roxo-escuros

Gradientes roxo-escuros parecem ricos e noturnos. Funcionam para música, vida noturna, produtos premium e tudo o que deve parecer noite. Mantenha a parada mais escura perto do preto e deixe uma cor iluminada surgir dela.

Gradientes roxos claros e pastel

Roxos pálidos parecem calmos, delicados e um pouco sonhadores. Combinam com bem-estar, beleza, papelaria e tudo o que deve parecer suave. Precisam de texto escuro e ficam melhores com um toque de calor ou de azul, para não parecerem um lilás acinzentado e chapado.

Gradientes roxos vibrantes

Os roxos vibrantes são os mais chamativos e os mais comuns. Use-os em lançamentos, games, eventos e marcas ousadas, e mantenha-os longe de textos longos. Misturar o roxo com rosa ou laranja mantém o meio brilhante; misturar com verde deixa cinza.

Texto sobre gradientes roxos

É fácil errar o texto sobre o roxo porque os roxos médios ficam num lugar incômodo: claros demais para letras brancas, escuros e saturados demais para o preto parecer calmo. Escolha a tinta pelo lugar onde o texto realmente fica.

Num gradiente, confira o ponto mais claro atrás do texto branco e o ponto mais escuro atrás do texto escuro. O guia de texto sobre um gradiente trata do posicionamento, e o de contraste de cores explica as razões.

Como evitar que um gradiente roxo pareça genérico

Violeta ao rosa a 135 graus é um dos gradientes mais usados de todos. É bonito, e já não diz nada sobre quem o usa. Quatro pequenas mudanças ajudam.

• Aprofunde. Comece de um roxo quase preto em vez de um violeta médio. Profundidade parece premium.
• Aqueça. Acrescente um destaque pêssego, damasco ou dourado numa ponta. Roxo com uma luz quente parece crepúsculo, e não software.
• Mude a forma. Um brilho radial baixo ou uma queda vertical parecem mais luz do que um preenchimento diagonal. Veja gradientes radiais.
• Acrescente um material. Um grão fino ou um brilho suave transformam uma mistura chapada numa superfície. Veja gradientes com grão.

.hero {
  background-color: #1a0b2e;
  background-image:
    radial-gradient(circle at 75% 110%, #fdba74 0%, transparent 35%),
    linear-gradient(in oklch 170deg, #0f0a1f 0%, #3b1a6e 55%, #7c3aed 100%);
}

Se o roxo é a cor da sua marca, a consistência importa mais do que a mistura exata. O guia de gradientes na identidade de marca mostra como fazer um roxo ser seu. Você também pode buscar “violeta profundo” ou “lavanda” no Mercado do Gradiently para ver Marks roxos vivos.