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

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

O azul e o roxo são vizinhos, por isso misturam-se mais facilmente do que quase qualquer outro par. É também por isso que tantos gradientes azul e roxo parecem iguais. Eis vinte que não parecem.

## The short version

- Um gradiente azul e roxo mistura matizes vizinhos como o azul #3b82f6, o índigo #4f46e5 e o violeta #7c3aed, por isso a transição fica limpa sem cor de ponte.
- O problema mais comum nas misturas de azul para roxo não é a lama mas a semelhança, porque a diagonal predefinida de índigo para violeta é usada em todo o lado.
- As misturas entre ciano e rosa, ou entre azuis baços e roxos baços, podem ficar cinzentas no meio, e interpolar em OKLCH mantém-nas vivas.
- O texto branco lê-se bem sobre índigo e violeta, mas falha muitas vezes sobre azuis médios e lavandas, onde uma tinta índigo profundo funciona melhor.
- Um fundo escuro, uma terceira cor usada com parcimónia e um pouco de grão fazem um gradiente azul e roxo parecer pensado em vez de predefinido.

Um **gradiente azul e roxo** corre entre matizes vizinhos no círculo cromático: azul `#3b82f6`, índigo `#4f46e5`, violeta `#7c3aed` e as pervincas e lavandas suaves à volta. Como os matizes estão lado a lado, a mistura fica limpa quase automaticamente. A parte mais difícil é fazer um que não pareça os milhares de ícones de aplicações e diapositivos de conferências que já usam um. Abaixo estão vinte códigos em quatro ambientes, os casos em que a mistura fica mesmo baça e as cores de texto que se leem em cada um.

## Porque é que o azul e o roxo se misturam tão bem

O roxo é azul com um pouco de vermelho. Caminha de um para o outro e cada passo pelo meio é uma cor real e saturada: azul, índigo, violeta. Compara com misturar azul com laranja, onde o ponto intermédio é um cinzento liso. [Cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors) explica o princípio, e o [círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel) mostra onde fica cada matiz.

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

A família do azul ao roxo. Escolhe três ou quatro amostras adjacentes e o gradiente mantém-se vivo do princípio ao fim.

## Gradientes azul e roxo escuros: noite e profundidade

Começa escuro e o gradiente parece logo menos genérico. Um fundo de meia-noite com luz índigo e violeta parece um céu noturno, uma sala de concertos ou uma aplicação premium. Estes cinco levam texto claro lindamente.

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

Gradientes azul e roxo escuros. O banding vê-se mais em misturas como estas, por isso junta grão antes de exportar.

## Gradientes azul e roxo suaves: pervinca e lavanda

Aclara a família e fica calma, sonhadora e um pouco nostálgica. Estes servem o bem-estar, o sono, a papelaria e tudo o que vise um ambiente suave. Mantém a tinta escura; o branco desaparece na maioria deles. Há mais em [gradientes pastel](https://gradiently.design/pt-pt/guide/pastel-gradients).

- Neblina de 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%)`
- Do papel ao violeta: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Misturas suaves de pervinca e lavanda. O texto índigo profundo lê-se em todas.

## Gradientes azul e roxo elétricos

Sobe a saturação e o par fica ruidoso, sintético e muito digital. Estes servem jogos, música, lançamentos de tecnologia e tudo o que é noturno. Usa-os em faixas ou brilhos em vez de num cartaz inteiro, e combina com quase preto para terem algo contra o qual brilhar. [Gradientes néon](https://gradiently.design/pt-pt/guide/neon-gradients) tem a técnica completa.

- Violeta elétrico: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Do céu à 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%)`
- Rotação ultravioleta: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Do preto ao ultravioleta: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Gradientes azul e roxo saturados. O primeiro é o clássico; os restantes são versões menos esperadas dele.

## Gradientes azul e roxo com uma terceira cor

A forma mais rápida de tornar teu um gradiente azul e roxo é uma cor extra usada com parcimónia. O rosa leva-o para o crepúsculo, o petróleo para a aurora, o dourado para o luxo e o pêssego para um nascer do sol suave.

- Crepúsculo com rosa: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Aurora petróleo: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Índigo com dourado: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Nascer do sol lavanda: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Azul, violeta, carmesim: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Vinte códigos no total. O rosa, o petróleo e o carmesim ficam junto do azul ou do roxo no círculo; o dourado fica uma pequena luz e o pêssego fica pálido, por isso nenhuma mistura passa pelo cinzento.

## Quando um gradiente azul e roxo fica baço

Do azul ao violeta é seguro. Duas misturas parecidas não são. O ciano para o rosa atravessa grande parte do círculo, e azuis baços e acinzentados para roxos baços dão um meio sem vida. Nos dois casos a solução é a mesma: interpolar em OKLCH, que mantém o brilho e a saturação uniformes ao longo da mistura. [Gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients) e [interpolação de gradientes](https://gradiently.design/pt-pt/guide/gradient-interpolation) vão mais fundo.

```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;
}
```

Acrescentar `in oklch` muda a forma como o navegador mistura as paragens. Os navegadores antigos ignoram toda a declaração, por isso mantém uma cor de fundo como recurso.

## Como fazer um gradiente azul e roxo parecer menos genérico

A diagonal do violeta para o azul é tão familiar que as pessoas a leem como predefinida antes de lerem o que escreveste sobre ela. Não precisas de cores exóticas para o evitar. Pequenas decisões deliberadas bastam, e acumulam-se.

- **Escolhe primeiro um fundo.** Um fundo de meia-noite ou de papel define o ambiente mais do que o azul ou o roxo, e separa-te logo do padrão vivo.
- **Tira a luz da diagonal.** Põe o violeta mais brilhante num canto com um gradiente radial em vez de o correr de ponta a ponta a 135 graus.
- **Usa paragens desiguais.** Deixa o índigo ocupar 60 por cento da superfície e o violeta só o último troço. Terços iguais parecem feitos por máquina.
- **Acrescenta um acento num só sítio.** Uma lasca de rosa, petróleo ou dourado, como no conjunto acima, fica muito mais na memória do que as cores de base.
- **Termina com grão.** Uma camada de ruído fino esconde o banding e transforma uma mistura de ecrã numa superfície; [gradientes granulados](https://gradiently.design/pt-pt/guide/grainy-gradients) tem o código.
- **Renderiza cada tamanho em separado.** A luz deve cair num sítio sensato num story e num banner, não onde um corte a deixar.

Os nomes de ambiente também ajudam. “Índigo da meia-noite com uma borda dourada” é uma decisão que podes repetir ao longo de um ano de publicações; “gradiente azul e roxo” não é.

## Texto sobre um gradiente azul e roxo

| Fundo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| Í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 | Falha |
| Lavanda `#a78bfa` | Índigo profundo `#1e1b4b` | 5,9:1 | Bom |
| Névoa de pervinca `#c7d2fe` | Índigo profundo `#1e1b4b` | 10,7:1 | Excelente |

Rácios de contraste WCAG. O azul médio é mais claro do que parece, o que apanha muitos designs de azul para roxo na ponta azul.

Uma publicação quadrada de LinkedIn a anunciar a versão 3 com letras brancas sobre um gradiente índigo escuro e violeta

Uma publicação de LinkedIn sobre fundo índigo escuro. Texto claro, brilho violeta mantido de um lado.

Um story vertical com letras índigo escuro sobre um gradiente pálido de pervinca e lavanda

Um story em pervinca suave com tinta índigo profundo.

Quando as palavras passam da ponta escura para a ponta clara do mesmo gradiente, nenhuma tinta funciona em todo o lado. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) trata das opções. Na Gradiently, a tinta automática resolve isto linha a linha, escolhendo texto claro ou escuro a partir da paleta do próprio Mark, por isso um fundo azul e roxo nunca engole um título.

## FAQ

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

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

### O azul e o roxo combinam num gradiente?

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

### Porque é que o meu gradiente de azul para rosa fica cinzento no meio?

O navegador mistura em sRGB por defeito, o que pode baçar misturas que atravessam grande parte do círculo. Acrescenta `in oklch` depois do ângulo para manter o meio vivo.

### Que cor de texto uso sobre um gradiente azul e roxo?

O branco lê-se bem sobre índigo e violeta. Sobre azul médio, lavanda e pervinca, um índigo profundo como `#1e1b4b` é mais seguro.

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

Índigo. Um índigo típico em design é `#4f46e5`, e os índigos mais escuros ficam por volta de `#312e81`.