Gradiente magenta: códigos elétricos entre o rosa e o roxo

Um gradiente magenta mistura a cor vívida entre o rosa e o roxo com uma vizinha: violeta para algo elétrico, laranja para calor, ciano para um clima cibernético ou quase preto para dar profundidade. O magenta puro de tela é #ff00ff, e é tão intenso que o gradiente costuma funcionar melhor quando o magenta é uma ponta da mistura, e não ela inteira. Os códigos abaixo cobrem cada direção, com notas sobre texto e sobre como o magenta se comporta na impressão.

Magenta, rosa e roxo: onde fica a linha

Na roda de cores HSL, o magenta fica a 300 graus, exatamente entre o vermelho e o azul. Deslize para o vermelho e ele vira rosa-choque; deslize para o azul e vira roxo e depois violeta. O magenta também é famoso por não aparecer no arco-íris: não existe um único comprimento de onda de luz para ele, e o olho o percebe quando recebe luz vermelha e azul juntas. Isso explica em parte por que ele parece tão artificial e elétrico.

Se o que você quer é algo mais suave e quente, mais perto de chiclete ou rosa-antigo do que de neon, a coleção de gradiente rosa é um ponto de partida melhor. O magenta ganha seu lugar quando você quer uma cor que ninguém consiga ignorar na rolagem.

Códigos de gradiente magenta elétrico

Magenta indo para violeta ou azul é o par elétrico clássico. Ele anda pela roda de cores sem cruzar nada turvo, então a mistura continua vívida até o fim. Combina com música, vida noturna, games e ferramentas criativas. Se você quer essa direção com mais azul do que magenta, os códigos de gradiente roxo assumem.

Códigos de magenta quente e pôr do sol

Gire para o outro lado da roda e o magenta esquenta: passa pelo rosa-choque e chega ao coral e ao laranja. É o visual dos gráficos do fim dos anos 1980, do synthwave e do vaporwave, e de muitos cartazes de festivais de verão. Uma parada escura no topo o transforma num entardecer. Cores vaporwave vai mais fundo nesse universo.

Magenta profundo sobre fundos escuros

O magenta parece mais caro quando brilha saindo da escuridão em vez de preencher o quadro. Um fundo vinho ou ameixa com uma luz magenta passa moda de luxo ou um bar de madrugada; espalhado por um cartaz inteiro, o mesmo magenta parece folheto de liquidação. Fundos escuros também dão ao texto branco um lar fácil.

Magenta na tela e na impressão

O magenta de tela é feito de luz, enquanto o de impressão é tinta, uma das quatro cores de processo do CMYK. O magenta de processo é bem menos intenso, normalmente mostrado na tela como #ec008c. Assim, um gradiente magenta que brilha no monitor pode parecer chapado e rosado num folheto. RGB vs CMYK explica a diferença, e gradientes para impressão trata da prova.

Texto sobre um gradiente magenta

O magenta é mais claro do que parece. Texto branco sobre #ff00ff puro chega a apenas cerca de 3,1 para 1 de contraste, o que serve para títulos grandes, mas não para texto pequeno. O preto sobre o mesmo magenta chega a cerca de 6,7 para 1, mas pesa. Na prática, ponha o texto branco na ponta mais profunda do gradiente ou escureça o magenta atrás das palavras pequenas para algo como #a3006f.

Em sites, o magenta também faz um título em gradiente marcante. Mantenha-o em tamanhos grandes de destaque, onde o contraste se sustenta, como descrito em texto com gradiente em CSS.

.headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #ff00ff 0%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Cores fortes são exatamente onde um fundo que responde às suas palavras mais ajuda. No Gradiently, um Mark magenta aprofunda a cor perto das letras e mantém sua parte mais calma atrás do título, então o brilho continua e as palavras ainda se leem. Para a prima mais fria do magenta, veja os códigos de gradiente ciano.