Gradientes vibrantes: códigos saturados que não tremem

Um gradiente vibrante é vivo e saturado sem tremer quando se cumprem duas regras: cada cor fica perto da vizinha no círculo cromático e cada passo muda claramente de luminosidade. Quebra a primeira e o meio fica turvo; quebra a segunda, pondo lado a lado tons opostos com o mesmo brilho, e a aresta parece tremer. Os doze códigos abaixo seguem as duas regras, por isso são ruidosos como um cartaz é ruidoso, não como uma enxaqueca.

Doze códigos de gradientes vibrantes

Porque é que alguns gradientes vivos vibram

Põe um vermelho saturado mesmo ao lado de um azul saturado de brilho semelhante e a fronteira parece cintilar, como se as duas cores não decidissem qual está à frente. Os designers chamam-lhe vibração cromática. É mais forte em arestas duras, em linhas finas e em texto colorido, e é por isso que o texto vermelho sobre fundo azul cansa tanto a leitura. As cores em si estão bem; o que a causa é a combinação de tons opostos com a mesma luminosidade, em contacto.

Há duas soluções. Ou manténs as cores afastadas com um degrau mais escuro ou mais claro entre elas, como à direita, ou escolhes vizinhos em vez de opostos. Cores complementares explica quando vale a pena o trabalho dos opostos.

Regras para fazeres o teu gradiente vibrante

A lama é a outra forma de os gradientes vivos falharem. Mistura dois opostos saturados em sRGB simples e a cor a meio cai para o cinzento, o que se trata em gradientes turvos e, a um nível mais técnico, em interpolação de gradientes. A própria saturação é um botão, não um interruptor; saturação no design mostra como a regular.

Gradientes vibrantes em CSS

Os navegadores modernos conseguem misturar num espaço de cor percetual se acrescentares in oklch ao gradiente. Isso mantém o meio de uma mistura larga tão vivo como as pontas. Dá primeiro aos navegadores mais antigos uma versão em hex.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Onde os gradientes vibrantes funcionam melhor

A cor vibrante ganha atenção, por isso gasta-a onde a atenção é todo o trabalho: um feed a deslizar, uma miniatura entre vinte, um cartaz do outro lado da rua. Funciona menos onde as pessoas precisam de ler durante muito tempo, como documentos, dashboards e artigos longos, onde um campo saturado cansa a vista ao fim de poucos parágrafos. Aí, limita o gradiente vibrante a um cabeçalho ou a um único botão e deixa uma superfície calma levar o resto.

A impressão é o único sítio onde convém esperar um choque. As cores de ecrã mais vivas, sobretudo os azuis elétricos, os rosas fortes e os verdes ácidos, ficam fora do que as tintas CMYK reproduzem e voltam visivelmente mais baças no papel. RGB vs CMYK explica porquê; escolhe tu versões ligeiramente mais profundas e pede uma prova antes de uma tiragem.

Palavras sobre um gradiente vibrante

Os fundos saturados variam de brilho de uma ponta à outra, por isso uma única cor de texto que se lê na ponta escura pode desaparecer na ponta clara. Usa só branco ou quase preto, põe o título onde o gradiente é mais profundo ou mais pálido e verifica o contraste no pior ponto, não na média. Contraste de cor e acessibilidade tem os números a atingir.

É aqui que um Mark do Gradiently ajuda com a cor viva: sabe onde estão as palavras, aprofunda ou aclara a cor junto às letras e a Tinta automática escolhe texto claro ou escuro por linha a partir da sua própria paleta. Um visual saturado mantém-se legível em todos os tamanhos, sem caixa nem sombra atrás do título. Para looks néon em concreto, vê gradientes néon; para o extremo oposto do botão, gradientes subtis.