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

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 explica o princípio, e o círculo cromático mostra onde cada tom fica.

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.

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.

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 traz a técnica completa.

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.

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 e interpolação de degradês aprofundam o assunto.

/* 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;
}

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

Quando as palavras cruzam da ponta escura para a ponta clara do mesmo degradê, nenhuma tinta única funciona em tudo. Texto sobre degradê 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.