Gradientes roxos: paletas, códigos e como os usar

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, aplicações e publicações nas redes sociais, porque o roxo parece imaginativo e um pouco luxuoso, e brilha lindamente num ecrã escuro. Abaixo estão paletas de gradientes roxos agrupadas por ambiente, cada uma com CSS para copiar, seguidas de como pôr texto sobre elas e de como evitar que fiquem iguais às de toda a gente.

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

“Roxo” abrange uma gama larga. O violeta inclina-se para o azul e parece fresco e elétrico. O magenta inclina-se para o rosa e parece quente e ruidoso. O ameixa é um roxo profundo e avermelhado que parece rico; o lavanda é um roxo pálido e acinzentado que parece suave. Saber qual queres facilita todas as outras escolhas.

O que um gradiente roxo transmite

Em grande parte da Europa e das Américas, o roxo associa-se à criatividade, à imaginação e ao luxo. A ligação ao luxo é histórica: durante séculos, o corante roxo foi raro e caro, por isso era usado pelos poderosos. Nos últimos anos tornou-se também uma das cores mais comuns no branding de software e tecnologia, onde sugere algo inventivo sem a seriedade do azul. As associações mudam noutros lugares; o significado das cores pelo mundo tem os detalhes.

• Ferramentas e estúdios criativos: o violeta e o magenta parecem inventivos e um pouco brincalhões.
• Beleza e bem-estar: os lavandas e os lilases parecem suaves e reparadores.
• Música, vida noturna e jogos: os roxos profundos com um brilho vivo parecem noite.
• Produtos premium: o ameixa e a ametista quase preta parecem ricos, sobretudo com um realce quente.

O preço é a familiaridade. Como tantas marcas de tecnologia usam um gradiente violeta, o teu tem de conquistar a diferença pela profundidade, pelo calor, pela matéria ou pela consistência com que o usas.

Gradientes roxos escuros

Os gradientes roxos escuros parecem ricos e noturnos. Funcionam para música, vida noturna, produtos premium e tudo o que deva parecer fim de dia. Mantém a paragem mais escura perto do preto e deixa uma cor iluminada erguer-se a partir dela.

Gradientes roxos claros e pastel

Os roxos pálidos parecem calmos, delicados e um pouco sonhadores. Servem o bem-estar, a beleza, a papelaria e tudo o que deva parecer suave. Precisam de texto escuro e ficam melhor com um toque de calor ou de azul, para não se lerem como um lilás acinzentado e plano.

Gradientes roxos vivos

Os roxos vivos são os mais ruidosos e os mais comuns. Usa-os em lançamentos, jogos, eventos e marcas ousadas, e mantém-nos longe de leituras longas. Levar o roxo para o rosa ou o laranja mantém o meio luminoso; levá-lo para o verde deixa-o cinzento.

Texto sobre gradientes roxos

É fácil errar com texto sobre roxo, porque os roxos médios ficam num sítio estranho: claros demais para letra branca, escuros e saturados demais para o preto parecer calmo. Escolhe a tinta conforme o sítio onde o texto fica de facto.

Num gradiente, verifica o ponto mais claro por trás do texto branco e o ponto mais escuro por trás do texto escuro. O texto sobre um gradiente trata da colocação, e o contraste de cor explica os rácios.

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

Violeta a rosa a 135 graus é um dos gradientes mais usados em todo o lado. É atraente, e já não diz nada sobre quem o usa. Quatro pequenas mudanças ajudam.

• Aprofunda-o. Começa num roxo quase preto em vez de um violeta médio. A profundidade lê-se como premium.
• Aquece-o. Junta um realce pêssego, alperce ou dourado numa das pontas. O roxo com uma luz quente parece crepúsculo e não software.
• Muda a forma. Um brilho radial baixo ou uma queda vertical parece mais luz do que um preenchimento na diagonal. Vê os gradientes radiais.
• Junta uma matéria. Grão fino ou um brilho suave transformam uma mistura plana numa superfície. Vê os 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 tua marca, a consistência importa mais do que a mistura exata. O branding com gradientes explica como tornar um roxo teu. Também podes pesquisar “violeta profundo” ou “lavanda” no Mercado da Gradiently para ver Marks roxos vivos.