Como criar um arco íris de três cores em projetos digitais
O arco íris de três cores não é uma definição acadêmica que você encontra em manuais. É uma técnica prática de gradiente que aparece constantemente em materiais de design, identidade visual e interfaces. Basicamente, você pega um degradê que transita por três cores distintas ao longo de um eixo linear ou radial e aplica onde for necessário. A coisa toda parece simples até você tentar exportar e perceber que as cores estão aparecendo com banding ou que o monitor não está mostrando o que você definiu no arquivo.
Configurando o arco íris de três cores no Photoshop
Abra um arquivo novo ou existente. Vá em Camada > Nova camada de ajuste > Gradiente. No editor de gradiente, clique duas vezes no degrau da barra para adicionar uma terceira cor. A configuração padrão usa três stops: um no início, um no meio e um no final. O problema é que a maioria das pessoas deixa os stops simétricos por padrão, e isso cria transições irregulares quando as cores têm luminâncias muito diferentes. No meu caso, estava trabalhando com um projeto de identidade visual para uma feira tech. Precisávamos de um gradiente que fosse de azul ciano para verde-lima e depois para laranja-pálido. A primeira exportação veio com faixas visíveis de corrupção de cor. O problema era que o arquivo estava em 8 bits por canal. Mudei para 16 bits antes de aplicar o gradiente e o banding sumiu completamente. Isso resolve a maior parte dos casos, mas tem uma limitação: arquivos 16 bits pesam o dobro e algumas ferramentas de web design não processam bem na hora do empacotamento final.
Depois de configurar as três cores nos stops, ajuste os interpoladores. O Photoshop oferece três opções: Interpolação Ciana, Interpolação RGB e Interpolação Spline. A interpolação RGB é a padrão e funciona na maioria dos cenários, mas se você notar saltos bruscos entre duas cores, mude para Spline. A diferença é que o RGB faz a transição em espaço de cor RGB puro, o que pode gerar tons esverdeados ou acinzentados feios no meio do caminho. O Spline calcula a transição por luminância percebida, o que mantém a progressão mais suave.
Dicas práticas que ninguém menciona
A primeira coisa que todo mundo esquece é de verificar o perfil de cor do documento antes de trabalhar. Se você está exportando para web mas o arquivo está em sRGB e o monitor está calibrado para Display P3, o arco íris de três cores vai aparecer diferente na tela do que no navegador do cliente. Eu gasto cerca de três minutos ajustando isso no início de cada projeto e economizo horas de retrabalho depois. A segunda nuance importante é a direção do gradiente. Um gradiente linear de três cores não precisa ser horizontal ou vertical. Se você rotacionar o ângulo para algo como 45 graus em um layout de pôster, as transições acontecem de forma mais dinâmica e ocupam menos espaço visual. Testei isso em um banner de 3x1,5 metros e o resultado foi muito mais interessante do que um gradiente horizontal padrão que simplesmente preenchia o fundo sem caráter.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Para quem trabalha com impressão, o gradiente de três cores em CMYK funciona de forma completamente diferente. O Photoshop converte as cores automaticamente, mas a conversão pode achatador o degradê porque o espaço CMYK tem gamut menor. Se o projeto for para imprimir, faça o gradiente em RGB primeiro, exporte uma versão de prova e só então converta. A versão convertida geralmente perde uns 15% de saturação nas cores mais vivas, então prepare o arquivo com cores já ligeiramente mais intensas desde o início.
O problema do banding em monitors budget e como contornar
Monitores mais simples, especialmente os que usam painéis TN ou IPS de entrada com 8 bits nativos, muitas vezes não conseguem reproduzir degradês suaves. Você vê linhas horizontais ou verticais discretas onde a cor deveria transicionar gradualmente. Isso acontece porque o monitor não tem suficiente profundidade de cor para mostrar as intermediárias entre os três tons. Uma solução prática é aplicar uma leve textura de ruído sobre o gradiente depois de pronto. Crie uma nova camada, preencha com ruído de 3% de opacidade e defina o modo de mesclagem como Sobrepor. O ruído quebra as transições regulares e esconde as linhas de banding tanto na tela quanto na impressão. Eu faço isso em praticamente todos os projetos que envolvem degradê, mesmo quando o monitor parece estar funcionando bem. O ruído é imperceptível na maioria das visualizações, mas faz uma diferença enorme quando alguém abre o arquivo em outro dispositivo.
Outra alternativa é usar dithering via plug-in ou plugin, mas isso adiciona dependência de software de terceiros. O truque do ruído é mais rápido e não requer instalação adicional.
Exportando corretamente
Para web, salve como PNG-24 ou JPEG com qualidade 90 ou superior. PNG-24 preserva melhor a suavidade do gradiente, mas o arquivo fica maior. JPEG com qualidade alta reduz o tamanho consideravelmente e o banding ainda não é visível na maioria das telas. Evite GIF salvo como GIF-89a para gradientes, a menos que você esteja fazendo algo muito específico com paleta limitada. Se o projeto for para vídeo ou animação, exporte em resolução mínima de 1080p com taxa de 24 fps ou superior. Gradientes em baixa resolução tendem a exibir artefatos de compressão que se tornam visíveis especialmente em plataformas como Instagram e TikTok, onde o recorte final pode amplificar problemas que não pareciam tão graves na edição.
Na prática, dominar o arco íris de três cores não exige nenhum conhecimento avançado de teoria das cores. Exige saber onde o software falha e como contornar essas falhas antes que elas se tornem problema no projeto final.
