# Degradê azul e roxo: 20 códigos que se misturam bem

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

Azul e roxo são vizinhos, então se misturam com mais facilidade do que quase qualquer outro par. É também por isso que tantos degradês azul e roxo parecem iguais. Aqui estão vinte que não parecem.

## The short version

- Um degradê azul e roxo mistura tons vizinhos como o azul #3b82f6, o índigo #4f46e5 e o violeta #7c3aed, então a transição fica limpa sem uma cor de ponte.
- O problema mais comum das misturas de azul para roxo não é a sujeira, e sim a mesmice, porque a diagonal padrão de índigo para violeta está em todo lugar.
- Misturas entre ciano e rosa, ou entre azuis e roxos apagados, podem ficar cinzentas no meio, e interpolar em OKLCH as mantém vivas.
- Texto branco funciona bem sobre índigo e violeta, mas costuma falhar em azuis médios e lavandas, onde uma tinta índigo profunda funciona melhor.
- Um fundo escuro, uma terceira cor usada com moderação e um pouco de grão fazem um degradê azul e roxo parecer pensado, e não padrão.

Um **degradê azul e roxo** passa por tons vizinhos no círculo cromático: azul `#3b82f6`, índigo `#4f46e5`, violeta `#7c3aed` e os tons suaves de pervinca e lavanda ao redor deles. Como os tons ficam lado a lado, a mistura sai limpa quase automaticamente. A parte difícil é criar um que não pareça os milhares de ícones de app e slides de evento que já usam essa combinação. Abaixo estão vinte códigos em quatro climas, os casos em que a mistura fica apagada e as cores de texto que funcionam em cada um.

## Por que azul e roxo se misturam tão bem

Roxo é azul com um pouco de vermelho. Vá de um ao outro e cada passo no caminho é uma cor real e saturada: azul, índigo, violeta. Compare com misturar azul e laranja, em que o ponto do meio é um cinza chapado. [Cores análogas](https://gradiently.design/pt-br/guide/analogous-colors) explica o princípio, e o [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel) mostra onde cada tom fica.

- Meia-noite: #0f0a2e
- Índigo profundo: #1e1b4b
- Azul royal: #1d4ed8
- Azul: #3b82f6
- Índigo: #4f46e5
- Violeta: #7c3aed
- Lavanda: #a78bfa
- Névoa pervinca: #c7d2fe

A família do azul ao roxo. Escolha três ou quatro amostras vizinhas e o degradê fica vivo do começo ao fim.

## Degradês azul e roxo escuros: noite e profundidade

Comece pelo escuro e o degradê na hora parece menos genérico. Um fundo meia-noite com luz índigo e violeta lembra um céu noturno, uma casa de shows ou um app premium. Estes cinco sustentam texto claro lindamente.

- Índigo meia-noite: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Lua violeta: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Marinho para ameixa: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Brilho no horizonte: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Corrente profunda: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Degradês azul e roxo escuros. O banding aparece mais em misturas assim, então adicione grão antes de exportar.

## Degradês azul e roxo suaves: pervinca e lavanda

Clareie a família e ela fica calma, sonhadora e um pouco nostálgica. Esses tons combinam com bem-estar, sono, papelaria e tudo que pede um clima delicado. Mantenha a tinta escura; o branco some na maioria deles. Há mais em [degradês pastel](https://gradiently.design/pt-br/guide/pastel-gradients).

- Bruma pervinca: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Lavanda da manhã: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Nuvem lilás: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Campo de centáureas: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Papel para violeta: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Misturas suaves de pervinca e lavanda. Texto índigo profundo funciona em todas elas.

## Degradês azul e roxo elétricos

Aumente a saturação e o par fica barulhento, sintético e muito digital. Esses combinam com games, música, lançamentos de tecnologia e tudo que é noturno. Use em faixas ou brilhos, e não no pôster inteiro, e combine com um quase preto para que tenham contra o que brilhar. [Degradês neon](https://gradiently.design/pt-br/guide/neon-gradients) traz a técnica completa.

- Violeta elétrico: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Céu para orquídea: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Pulso índigo: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Giro ultravioleta: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Preto para ultravioleta: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Degradês azul e roxo saturados. O primeiro é o clássico; os outros são versões menos óbvias dele.

## Degradês azul e roxo com uma terceira cor

O jeito mais rápido de deixar um degradê azul e roxo com a sua cara é uma cor extra usada com moderação. O rosa leva para o entardecer, o verde-azulado para a aurora, o dourado para o luxo e o pêssego para um amanhecer suave.

- Entardecer com rosa: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Aurora verde-azulada: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Índigo com dourado: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Amanhecer lavanda: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Azul, violeta, carmim: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Vinte códigos no total. Rosa, verde-azulado e carmim ficam ao lado do azul ou do roxo no círculo; o dourado continua sendo uma luz pequena e o pêssego continua pálido, então nenhuma mistura passa pelo cinza.

## Quando um degradê azul e roxo fica sujo

Azul para violeta é seguro. Duas misturas parecidas não são. Ciano para rosa atravessa boa parte do círculo, e azuis acinzentados e apagados com roxos apagados geram um meio sem vida. Nos dois casos a solução é a mesma: interpolar em OKLCH, que mantém brilho e saturação uniformes na mistura. [Degradês sujos](https://gradiently.design/pt-br/guide/muddy-gradients) e [interpolação de degradês](https://gradiently.design/pt-br/guide/gradient-interpolation) aprofundam o assunto.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

Adicionar `in oklch` muda a forma como o navegador mistura as paradas. Navegadores antigos ignoram a declaração inteira, então mantenha uma cor de fundo como alternativa.

## Como deixar um degradê azul e roxo menos genérico

A diagonal de violeta para azul é tão familiar que as pessoas a leem como padrão antes de ler qualquer coisa que você escreveu em cima. Você não precisa de cores exóticas para fugir disso. Decisões pequenas e deliberadas bastam, e elas se somam.

- **Escolha o fundo primeiro.** Um fundo meia-noite ou cor de papel define o clima mais do que o azul ou o roxo, e já separa você do padrão vibrante.
- **Tire a luz da diagonal.** Coloque o violeta mais claro em um canto com um degradê radial em vez de atravessar de ponta a ponta a 135 graus.
- **Use paradas desiguais.** Deixe o índigo ocupar 60 por cento da superfície e o violeta só o trecho final. Terços iguais parecem feitos por máquina.
- **Adicione um acento em um só lugar.** Uma lasca de rosa, verde-azulado ou dourado, como no conjunto acima, fica na memória muito mais do que as cores de base.
- **Finalize com grão.** Uma camada fina de ruído esconde o banding e transforma uma mistura de tela em superfície; [degradês granulados](https://gradiently.design/pt-br/guide/grainy-gradients) traz o código.
- **Renderize cada tamanho separadamente.** A luz deve cair num lugar que faça sentido no story e no banner, e não onde o corte a deixar.

Nomes de clima também ajudam. “Índigo meia-noite com borda dourada” é uma decisão que você consegue repetir em um ano inteiro de posts; “degradê azul e roxo” não é.

## Texto sobre um degradê azul e roxo

| Fundo | Texto | Contraste | Veredito |
| --- | --- | --- | --- |
| Índigo `#4f46e5` | Branco | 6,3:1 | Bom |
| Violeta `#7c3aed` | Branco | 5,7:1 | Bom |
| Azul `#3b82f6` | Branco | 3,7:1 | Só títulos grandes |
| Lavanda `#a78bfa` | Branco | 2,7:1 | Reprovado |
| Lavanda `#a78bfa` | Índigo profundo `#1e1b4b` | 5,9:1 | Bom |
| Névoa pervinca `#c7d2fe` | Índigo profundo `#1e1b4b` | 10,7:1 | Excelente |

Taxas de contraste WCAG. O azul médio é mais claro do que parece, e isso derruba muitos designs de azul para roxo na ponta azul.

Um post quadrado de LinkedIn anunciando a versão 3 com letras brancas sobre um degradê índigo escuro e violeta

Um post de LinkedIn sobre fundo índigo escuro. Texto claro, brilho violeta só de um lado.

Um story vertical com letras índigo escuras sobre um degradê pálido de pervinca e lavanda

Um story em pervinca suave com tinta índigo profunda.

Quando as palavras cruzam da ponta escura para a ponta clara do mesmo degradê, nenhuma tinta única funciona em tudo. [Texto sobre degradê](https://gradiently.design/pt-br/guide/text-on-gradient) cobre as opções. No Gradiently, a tinta automática resolve isso linha a linha, escolhendo letras claras ou escuras da própria paleta do Mark, então um fundo azul e roxo nunca engole um título.

## FAQ

### Qual é um bom código de degradê azul e roxo?

Um confiável é `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. Para algo menos óbvio, comece de um fundo escuro: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Azul e roxo combinam em um degradê?

Sim. São vizinhos no círculo cromático, então cada passo entre eles é uma cor limpa e saturada, como o índigo.

### Por que meu degradê de azul para rosa fica cinza no meio?

O navegador mistura em sRGB por padrão, o que pode apagar misturas que atravessam boa parte do círculo. Adicione `in oklch` depois do ângulo para manter o meio vivo.

### Que cor de texto usar sobre um degradê azul e roxo?

Branco funciona bem sobre índigo e violeta. Sobre azul médio, lavanda e pervinca, um índigo profundo como `#1e1b4b` é mais seguro.

### Qual cor fica entre o azul e o roxo?

O índigo. Um índigo típico para design é `#4f46e5`, e índigos mais escuros ficam em torno de `#312e81`.