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

Um gradiente amarelo parece vivo e alegre quando todos os pontos tendem para o quente: creme, manteiga, limão, dourado, laranja. Falha de duas formas previsíveis. Mistura-o com azul ou verde-azulado e o meio fica verde; escurece-o com cinzento e fica azeitona. Mantém o tom do lado quente do amarelo, aprofunda-o com âmbar em vez de preto, e ele continua a ser sol de lado a lado. Os códigos abaixo assentam nessa regra.

Porque é que os gradientes amarelos ficam verdes ou turvos

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

• Misturar com cores frias. Entre o amarelo e o ciano, o verde-azulado ou o azul, o navegador tem de passar pelo verde. Uma mistura de amarelo solar com azul-céu ganha uma faixa de lima ou salva no meio.
• Escurecer com preto ou cinzento. Os nossos olhos leem um amarelo escuro e pouco saturado como azeitona ou caqui, e não como «amarelo escuro». Não existe um amarelo profundo que ainda pareça amarelo.
• Partir de um limão que já tende para o verde. Os limões ácidos, como #e4f04a, ficam frescos sozinhos mas puxam todos os pontos vizinhos para a lima.

O mesmo problema do meio cinzento afeta quaisquer cores opostas, e os gradientes turvos tratam dele em geral. O amarelo é apenas o primeiro a mostrá-lo, porque o verde está tão perto.

Códigos de gradiente amarelo vivo

Estes são os intensos: verão, faixas de saldos, marcas infantis, festivais, sinalização de aviso bem feita. Cada um junta o amarelo a um parceiro mais quente para haver movimento sem derivar para o verde.

O amarelo vivo cansa em grandes quantidades, por isso usa-os em publicações e faixas e não num site inteiro. Num story de 1080×1920, uma mistura de amarelo que esbate para laranja na base dá ao olhar um sítio onde pousar e mantém a parte mais viva perto da zona do título, no topo.

Gradientes de amarelo claro: manteiga e creme

Os amarelos pálidos comportam-se como papel quente. São excelentes fundos para ementas, convites, newsletters e tudo o que tem muita leitura, porque o texto escuro assenta confortavelmente neles. Mantém pelo menos um ponto perto do branco para o amarelo se ler como luz, e não como um tom sobre tudo.

Gradientes dourados e de amarelo escuro sem azeitona

Para dar riqueza ao amarelo, não o escureças. Desloca-o. Move os pontos mais profundos para âmbar, ocre e castanho, e o amarelo passa a ser dourado, mel e mostarda em vez de caqui. Para acabamentos metálicos em particular, os gradientes dourados mostram como imitar o brilho.

Gradientes de amarelo e azul sem o meio verde

O amarelo e o azul são um par clássico, mas uma mistura direta entre eles produz uma faixa verde. Tens três boas opções: pôr um ponto claro entre eles, encaminhar a mistura por rosa e violeta, ou manter as duas cores separadas como áreas em vez de mistura.

No CSS moderno também podes pedir ao navegador que dê a volta longa ao círculo cromático. Interpolar em OKLCH com longer hue leva o amarelo ao azul por laranja, rosa e violeta em vez de verde. O suporte e a 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, por isso a letra branca desaparece nele. O branco sobre #facc15 mede cerca de 1,5 para 1, enquanto um castanho profundo como #422006 mede mais de 9 para 1 sobre o mesmo amarelo. Usa letra escura quase sempre e guarda o branco para os dourados mais profundos. O contraste de cor e acessibilidade tem os limiares.

No Gradiently, a Tinta automática toma essa decisão por ti, escolhendo texto claro ou escuro para cada linha a partir da paleta do próprio Mark, para um design amarelo não precisar de verificação manual de contraste sempre que o redimensionas. Se o amarelo faz parte da tua identidade, o significado da cor amarela explica o que sinaliza, e os gradientes laranja são o vizinho natural.