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

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

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.

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.

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

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.

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 e interpolação de gradientes vão mais fundo.

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

Quando as palavras passam da ponta escura para a ponta clara do mesmo gradiente, nenhuma tinta funciona em todo o lado. Texto sobre gradiente 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.