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

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

O roxo é uma das cores de gradiente mais usadas na web, o que o torna uma escolha segura e também um lugar fácil de se perder. Aqui estão paletas que parecem pensadas, com os códigos para usá-las.

## 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 é muito associado a criatividade, luxo e imaginação, e se tornou uma cor muito comum na identidade visual de empresas de tecnologia.
- Roxos profundos como #4c1d95 sustentam bem o texto branco, enquanto lavandas claros precisam de texto escuro.
- Roxos médios como #a78bfa são os mais difíceis para texto, porque são claros demais para letras brancas e saturados demais para parecerem calmos sob o preto.
- Acrescentar calor, profundidade ou grão é a forma mais rápida de evitar que um gradiente roxo pareça uma predefinição qualquer.

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.

- 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. Puxando para o azul à esquerda, para o vermelho no meio, suaves à direita.

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

- 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 ao violeta: `linear-gradient(135deg, #0b1026 0%, #312e81 50%, #6d28d9 100%)`

Quatro gradientes roxo-escuros. Cada um surge do quase preto, então o texto branco fica confortável na maior parte do campo.

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

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

Gradientes roxos suaves. As pontas quentes (rosado, pêssego) evitam que pareçam frios.

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

- Violeta ao rosa: `linear-gradient(135deg, #6d28d9 0%, #db2777 100%)`
- Violeta elétrico: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #e879f9 100%)`
- Violeta ao 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 se misturam com vizinhos quentes, então nenhum apaga no meio.

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

| Texto sobre o fundo | Contraste | Veredito |
| --- | --- | --- |
| 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 | Tinta escura funciona aqui |
| `#1e1033` sobre `#ede9fe` | 15,0:1 | Excelente |

Razões de contraste WCAG, calculadas. O texto corrido precisa de 4,5:1, o texto grande de 3:1.

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](https://gradiently.design/pt-br/guide/text-on-gradient) trata do posicionamento, e o de [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica as razões.

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

Escuro e rico: uma capa que combina com ouvir à noite.

Um post de dica em retrato com texto escuro sobre um gradiente suave e pálido

Suave e claro: um post delicado com tinta escura.

## 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](https://gradiently.design/pt-br/guide/radial-gradient).
- **Acrescente um material.** Um grão fino ou um brilho suave transformam uma mistura chapada numa superfície. Veja [gradientes com grão](https://gradiently.design/pt-br/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 surgindo de baixo. A cor sólida é uma alternativa para navegadores mais antigos.

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](https://gradiently.design/pt-br/guide/gradient-branding) 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.

## FAQ

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

Azul, rosa, magenta e destaques quentes como pêssego ou dourado se misturam bem com o roxo. Verde e amarelo ficam do lado oposto e tendem a deixar o meio do gradiente cinza.

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

Por exemplo, linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%) cria 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. Confira o contraste onde o gradiente é mais claro atrás do texto branco.

### O que um gradiente roxo transmite?

O roxo é muito associado a criatividade, imaginação e luxo. Também é muito comum na identidade visual de empresas de tecnologia, o que o torna familiar, mas mais difícil de se destacar.