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

Um gradiente vibrante é vivo e saturado sem tremer quando duas regras valem: cada cor fica perto da vizinha no círculo cromático e cada passo muda claramente de luminosidade. Quebre a primeira e o meio fica barrento; quebre a segunda, colocando matizes opostos de mesmo brilho lado a lado, e a borda parece tremer. Os doze códigos abaixo seguem as duas regras, então são fortes do jeito que um pôster é forte, não do jeito que uma enxaqueca é.

Doze códigos de gradiente vibrante

Por que alguns gradientes vivos vibram

Coloque um vermelho saturado direto contra um azul saturado de brilho parecido e o limite parece piscar, como se as duas cores não conseguissem decidir qual está na frente. Os designers chamam isso de vibração cromática. É mais forte em bordas duras, em linhas finas e em texto colorido, e é por isso que texto vermelho sobre fundo azul cansa tanto de ler. As cores em si estão certas; é a combinação de matiz oposto e luminosidade igual, encostados, que causa o efeito.

Há duas soluções. Ou você separa as cores com um passo mais escuro ou mais claro entre elas, como à direita, ou escolhe vizinhas em vez de opostas. Cores complementares explica quando os opostos valem o trabalho.

Regras para criar o seu gradiente vibrante

O barro é o outro jeito de falharem os gradientes vivos. Misture dois opostos saturados em sRGB puro e a cor do meio cai para o cinza, o que é tratado em gradientes barrentos e, em nível mais técnico, em interpolação de gradientes. A saturação em si é um botão giratório, não um interruptor; saturação no design mostra como ajustá-la.

Gradientes vibrantes em CSS

Navegadores modernos podem misturar em um espaço de cor perceptual ao acrescentar in oklch ao gradiente. Isso mantém o meio de uma mistura ampla tão vivo quanto as pontas. Dê antes 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 conquista atenção, então gaste-a onde atenção é todo o trabalho: um feed que rola, uma miniatura entre vinte outras, um pôster do outro lado da rua. Funciona menos onde as pessoas precisam ler por muito tempo, como documentos, painéis e artigos longos, em que um campo saturado cansa a vista em poucos parágrafos. Ali, limite o gradiente vibrante a um cabeçalho ou a um único botão e deixe uma superfície calma carregar o resto.

A impressão é o único lugar para esperar um choque. As cores mais vivas da tela, sobretudo azuis elétricos, rosas fortes e verdes ácidos, ficam fora do que as tintas CMYK reproduzem e voltam visivelmente mais opacas no papel. RGB ou CMYK explica por quê; escolha você mesmo versões um pouco mais profundas e peça uma prova antes de uma tiragem.

Palavras sobre um gradiente vibrante

Fundos saturados variam em brilho de uma ponta à outra, então uma única cor de texto que se lê na ponta escura pode sumir na clara. Use só branco ou quase preto, posicione o título onde o gradiente é mais profundo ou mais pálido e confira o contraste no pior ponto, não na média. Contraste de cor e acessibilidade traz os números a buscar.

É aí que um Mark do Gradiently ajuda com a cor viva: ele sabe onde estão as palavras, aprofunda ou clareia a cor perto das letras, e a tinta automática escolhe texto claro ou escuro por linha a partir da própria paleta. Um visual saturado continua legível em todos os tamanhos sem caixa nem sombra atrás do título. Para visuais neon, veja gradientes neon; para a outra ponta do botão, gradientes sutis.