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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/purple-gradient)

O roxo é uma das cores de gradiente mais usadas na web, o que o torna uma escolha segura e também uma em que é fácil perder-se. Eis paletas que parecem pensadas, com os códigos para as usares.

## The short version

- Um gradiente roxo mistura tons de violeta, roxo, ameixa ou lavanda, muitas vezes com um azul ou um rosa vizinho.
- O roxo associa-se habitualmente à criatividade, ao luxo e à imaginação, e tornou-se uma cor muito comum no branding de tecnologia.
- Os roxos profundos como #4c1d95 aguentam bem texto branco, enquanto os lavandas claros precisam de texto escuro.
- Os roxos médios como #a78bfa são os mais difíceis para texto, porque são claros demais para letra branca e saturados demais para parecerem calmos sob o preto.
- Juntar calor, profundidade ou grão é a forma mais rápida de impedir que um gradiente roxo pareça uma predefinição.

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.

- Violeta profundo: #2e1065
- Ametista: #4c1d95
- Violeta: #7c3aed
- Roxo magenta: #a21caf
- Ameixa: #5b2149
- Violeta suave: #a78bfa
- Lavanda: #c4b5fd
- Névoa lilás: #ede9fe

Oito roxos, do mais profundo ao mais pálido. A inclinar para o azul à esquerda, para o vermelho ao meio, suaves à direita.

## 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](https://gradiently.design/pt-pt/guide/color-meanings-around-the-world) 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.

- Noite de ametista: `linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%)`
- Brilho violeta: `radial-gradient(circle at 70% 20%, #7c3aed 0%, #2e1065 45%, #0b0617 100%)`
- Veludo ameixa: `linear-gradient(180deg, #120a1c 0%, #3b1236 60%, #7a2d5c 100%)`
- Índigo a violeta: `linear-gradient(135deg, #0b1026 0%, #312e81 50%, #6d28d9 100%)`

Quatro gradientes roxos escuros. Cada um ergue-se a partir de quase preto, por isso o texto branco assenta bem na maior parte do campo.

## 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.

- Névoa lilás: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 55%, #c4b5fd 100%)`
- Lavanda a rosado: `linear-gradient(135deg, #ede9fe 0%, #fbcfe8 100%)`
- Pervinca a orquídea: `linear-gradient(160deg, #e0e7ff 0%, #ddd6fe 50%, #f5d0fe 100%)`
- Lavanda a pêssego: `linear-gradient(135deg, #f3e8ff 0%, #fde2c8 100%)`

Gradientes roxos suaves. As pontas quentes (rosado, pêssego) impedem-nos de parecer frios.

## 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.

- Violeta a rosa: `linear-gradient(135deg, #6d28d9 0%, #db2777 100%)`
- Violeta elétrico: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #e879f9 100%)`
- Violeta a pôr do sol: `linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #fb923c 100%)`
- Magenta profundo: `linear-gradient(135deg, #3b0764 0%, #a21caf 55%, #f472b6 100%)`

Gradientes roxos saturados. Os quatro vão em direção a vizinhos quentes, por isso nenhum fica baço no meio.

## 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.

| Texto sobre fundo | Contraste | Veredicto |
| --- | --- | --- |
| Branco sobre `#2e1065` | 15,2:1 | Excelente para qualquer texto |
| Branco sobre `#4c1d95` | 11,0:1 | Excelente |
| Branco sobre `#7c3aed` | 5,7:1 | Bom para texto corrido e grande |
| Branco sobre `#a78bfa` | 2,7:1 | Falha, mesmo para texto grande |
| `#1e1033` sobre `#a78bfa` | 6,6:1 | A tinta escura funciona aqui |
| `#1e1033` sobre `#ede9fe` | 15,0:1 | Excelente |

Rácios de contraste WCAG, calculados. O texto corrido precisa de 4,5:1 e o texto grande de 3:1.

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](https://gradiently.design/pt-pt/guide/text-on-gradient) trata da colocação, e o [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica os rácios.

Uma capa quadrada de podcast intitulada Turno da Noite sobre um gradiente profundo

Escuro e rico: uma capa a condizer com uma escuta noturna.

Uma publicação vertical com uma dica em texto escuro sobre um gradiente suave e pálido

Suave e claro: uma publicação delicada com tinta escura.

## 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](https://gradiently.design/pt-pt/guide/radial-gradient).
- **Junta uma matéria.** Grão fino ou um brilho suave transformam uma mistura plana numa superfície. Vê os [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients).

```css
.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%);
}
```

Um campo violeta profundo com um brilho quente a subir de baixo. A cor sólida serve de alternativa para browsers mais antigos.

Se o roxo é a cor da tua marca, a consistência importa mais do que a mistura exata. O [branding com gradientes](https://gradiently.design/pt-pt/guide/gradient-branding) explica como tornar um roxo teu. Também podes pesquisar “violeta profundo” ou “lavanda” no Mercado da Gradiently para ver Marks roxos vivos.

## FAQ

### Que cores combinam bem com o roxo num gradiente?

O azul, o rosa, o magenta e realces quentes como o pêssego ou o dourado misturam-se com limpeza com o roxo. O verde e o amarelo ficam do lado oposto e tendem a ficar cinzentos no meio de um gradiente.

### Qual é o código CSS de um gradiente roxo?

Por exemplo, linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%) dá um gradiente de ametista profunda. Todos os exemplos desta página podem ser copiados diretamente.

### Que cor de texto funciona sobre um gradiente roxo?

O branco funciona sobre roxos profundos e médio-escuros, e uma tinta roxa quase preta funciona sobre roxos claros e médios. Verifica o contraste onde o gradiente é mais claro por trás do texto branco.

### O que transmite um gradiente roxo?

O roxo associa-se habitualmente à criatividade, à imaginação e ao luxo. É também muito comum no branding de tecnologia, o que o torna familiar mas mais difícil para te destacares.