Gradiente amarelo: códigos vivos que não ficam verdes

Um gradiente amarelo parece vivo e alegre quando todas as paradas pendem para o quente: creme, manteiga, limão, dourado, laranja. Ele dá errado de duas formas previsíveis. Misture com azul ou verde-azulado e o meio vira verde; escureça com cinza e vira oliva. Mantenha o matiz do lado quente do amarelo, aprofunde com âmbar e não com preto, e ele continua sol de ponta a ponta. Os códigos abaixo seguem essa regra.

Por que gradientes amarelos ficam verdes ou turvos

O amarelo fica bem ao lado do verde no círculo cromático, bem mais perto do que a maioria imagina. Isso o torna frágil em três situações.

• Mistura com cores frias. Entre o amarelo e o ciano, o verde-azulado ou o azul, o navegador precisa passar pelo verde. Uma mistura de amarelo ensolarado com azul-céu ganha uma faixa lima ou sálvia no meio.
• Escurecer com preto ou cinza. Nossos olhos leem um amarelo escuro e pouco saturado como oliva ou cáqui, e não como “amarelo escuro”. Não existe amarelo profundo que ainda pareça amarelo.
• Começar de um limão que já tende ao verde. Limões ácidos como #e4f04a parecem frescos sozinhos, mas puxam toda parada vizinha para o lima.

O mesmo problema do meio cinza afeta quaisquer cores opostas, e gradientes turvos trata disso em geral. O amarelo só o mostra primeiro, porque o verde está tão perto.

Códigos de gradiente amarelo vivo

Estes são os barulhentos: verão, banners de promoção, marcas infantis, festivais, sinalização de aviso bem-feita. Cada um une o amarelo a um parceiro mais quente para haver movimento sem tender ao verde.

O amarelo vivo cansa em grande quantidade, então use estes em posts e banners, e não num site inteiro. Num story 1080×1920, uma mistura de amarelo que esmaece para laranja embaixo dá ao olhar um lugar para pousar e mantém a parte mais viva perto da área do título, no topo.

Gradientes de amarelo claro: manteiga e creme

Amarelos pálidos se comportam como papel quente. Dão ótimos fundos para cardápios, convites, newsletters e tudo com muita leitura, porque o texto escuro assenta bem neles. Mantenha ao menos uma parada perto do branco para o amarelo parecer luz e não um tom sobre tudo.

Gradientes dourados e de amarelo escuro sem oliva

Para o amarelo parecer rico, não o escureça. Desloque-o. Leve as paradas mais profundas para âmbar, ocre e marrom, e o amarelo vira dourado, mel e mostarda em vez de cáqui. Para acabamentos metálicos em particular, gradientes dourados mostra como simular o brilho.

Gradientes de amarelo e azul sem o meio verde

Amarelo e azul são um par clássico, mas uma mistura direta entre eles gera uma faixa verde. Você tem três boas opções: pôr uma parada clara entre eles, passar a mistura por rosa e violeta ou manter as duas cores separadas, como áreas e não como mistura.

No CSS moderno, você também pode pedir ao navegador que dê a volta longa no círculo cromático. Interpolar em OKLCH com longer hue leva o amarelo ao azul por laranja, rosa e violeta, em vez de verde. Suporte e sintaxe estão em gradientes CSS em OKLCH.

.banner {
  /* fallback for older browsers: route through pink by hand */
  background: linear-gradient(90deg, #fde047, #f9a8d4, #818cf8);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .banner {
    background: linear-gradient(in oklch longer hue 90deg, #fde047, #818cf8);
  }
}

Texto sobre um gradiente amarelo

O amarelo é a cor saturada mais clara que existe, então texto branco desaparece sobre ele. Branco sobre #facc15 mede cerca de 1,5 para 1, enquanto um marrom profundo como #422006 mede mais de 9 para 1 sobre o mesmo amarelo. Use texto escuro quase sempre e reserve o branco para os dourados mais profundos. Contraste de cores e acessibilidade traz os limites.

No Gradiently, a tinta Auto toma essa decisão por você, escolhendo texto claro ou escuro para cada linha na própria paleta do Mark, então um design amarelo não precisa de checagem manual de contraste a cada redimensionamento. Se o amarelo faz parte da sua identidade, significado da cor amarela explica o que ele sinaliza, e gradientes laranja são seus vizinhos naturais.