Entendendo a seleção de tons amarelos em projetos digitais
Muita gente trava na hora de escolher qual cor da amarelo usar em um projeto. O amarelo parece simples à primeira vista, mas na prática é uma das cores mais traiçoeiras do espectro. Um tom errado e seu design fica ilegível, cansativo para os olhos ou simplesmente se perde no meio de outros elementos visuais.
qual cor da amarelo para o seu projeto
O problema real não é encontrar um amarelo — é encontrar o amarelo certo. O que vejo repetidamente em projetos de design e desenvolvimento é gente pegando qualquer tom de amarelo do selector do Photoshop e achando que está tudo certo. Aí chega a fase de produção e a coisa desmonta. Cores que pareciam vibrantes na tela do designer ficam completamente diferentes na impressão, ou pior, ficam ilegíveis em telas com brilho baixo. Eu precisei resolver isso de forma prática num projeto de interface interna onde tínhamos que identificar qual cor da amarelo funcionava tanto em modo claro quanto em modo escuro. A solução não foi complicada, mas exigiu um processo específico que vou descrever abaixo.
Processo prático para selecionar o amarelo certo
Comece definindo onde essa cor vai viver. Amarelo para botão de ação é diferente de amarelo para destaque tipográfico, que é diferente de amarelo para fundo de seção. Cada contexto exige características distintas de luminosidade, saturação e contraste. Abra seu editor de cor e trabalhe no espaço HSL, não RGB. É mais fácil entender o que você está fazendo porque você controla diretamente o matiz, a saturação e a luminosidade separadamente. Para amarelos que precisam funcionar em fundos brancos, mantenha o matiz entre 45 e 60 graus. Abaixo disso você entra em tons de laranja que já são outra família cromática. Acima disso começa a ficar verde-amarelado.
A saturação geralmente fica entre 80 e 100 por cento para amarelos que precisam se destacar. Se sua saturação for muito baixa, o amarelo vira bege e perde toda a função visual. Se for exatamente 100 por cento, pode ficar agressivo demais dependendo do contexto. O sweet spot costuma ficar em torno de 90 a 95 por cento. A luminosidade é onde a maioria erra. Para texto ou ícones sobre fundo claro, você precisa de luminosidade entre 45 e 55 por cento. Acima disso, o contraste cai e fica ilegível. Abaixo disso, você perde a característica amarelada e o tom tende ao mostarda ou ocre. Eu descobri isso na marra quando um amarelo que eu escolhi com luminosidade de 70 por cento simplesmente desapareceu em telas de monitor OLED em ambiente com pouca luz.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Para fundo amarelo com texto escuro, inverta a lógica. Use luminosidade entre 50 e 65 por cento e coloque texto em preto ou cinza muito escuro, nunca branco. Texto branco sobre amarelo é uma das combinações mais ilegíveis que existem e você vai ver isso acontecendo em milhares de sites por aí. Depois de definir o tom base, faça o teste de contraste. Use a fórmula WCAG 2.1 para calcular o ratio de contraste. Para texto normal, o mínimo aceitável é 4.5:1. Para texto grande ou títulos, 3:1. Se seu amarelo não atinge esses valores no fundo que você escolheu, ajuste a luminosidade até atingir ou considere mudar o fundo.
Considerações técnicas importantes
Se o projeto envolve impressão, esqueça os valores HSL da tela. Amarelo em CMYK funciona de maneira completamente diferente. O amarelo primário da impressão é basicamente Y=100 C=0 M=0 K=0, mas na prática pigmentos reais nunca chegam a esse ideal. Amarelos impressos tendem a ficar mais apagados e menos vibrantes do que na tela. Eu perdi duas rodadas de prova de cor tentando replicar um amarelo hexadecimal #FFD700 em offset e no final usei um PANTONE 116 C que se aproximava muito mais do resultado esperado. Levei três dias a mais no projeto por causa disso. Para projetos web, defina o amarelo como variável CSS desde o início. Você vai precisar dele em múltiplas versões — hover, active, disabled, dark mode. Começar com uma variável central economiza tempo e garante consistência. Algo como --cor-amarillo-principal: #FFC107 é um ponto de partida razoável para a maioria dos projetos, mas ajuste conforme seu contexto específico.
Telas com gama estreita, como monitores de escritório básicos, vão reduzir ainda mais a percepção do amarelo. Se seu público usa hardware diverso, teste em pelo menos dois monitores diferentes antes de considerar o tom como aprovado. Um amarelo que funciona perfeitamente em um iPhone pode parecer quase branco em um monitor Acer de escritório dos anos 2010. Existe uma limitação que poucos mencionam: o amarelo puro sempre será problemático para acessibilidade em algum contexto. Não existe um amarelo que seja simultaneamente vibrante o suficiente para chamar atenção e com contraste adequado sobre fundo claro sem comprometer a legibilidade. Se o projeto exige alto contraste e o amarelo é parte fundamental da identidade, a solução mais honesta é usar o amarelo apenas como elemento decorativo e reserva os tons legíveis para texto e informações críticas.
Para projetos que precisam de múltiplas cores de destaque além do amarelo, considere construir uma paleta coesa usando a regra do análogo no círculo cromático. Amarelos funcionam bem ao lado de laranjas e verdes-amarelados. Misturar amarelo com azuis ou roxos cria pontos de tensão visual que podem funcionar em contextos muito específicos, mas geralmente resultam em vibração indesejada entre as cores adjacentes.
