Tons de Amarelo: Códigos Hex, RGB e HSL

O que conta como um tom de amarelo?

O amarelo é a matiz mais luminosa que o olho distingue, e os 16 tons abaixo mostram o pouco espaço que ele tem para se mover. LightYellow #FFFFE0 e LemonChiffon #FFFACD são quase brancos; o amarelo puro #FFFF00 é o mais saturado que a família alcança; e dali a única direção possível é o dourado e o oliva: Ouro #FFD700, Goldenrod #DAA520, DarkGoldenrod #B8860B.

Esse alcance curto é um problema prático. O amarelo não pode ser escurecido continuando amarelo: baixe a luminosidade e ele vira Mostarda #FFDB58, depois o embarrado DarkKhaki #BDB76B, depois algo que o olho arquiva como marrom. Quem precisa de um amarelo escuro costuma recorrer a Açafrão #F4C430 ou ao Goldenrod, que mantêm a matiz legível abrindo mão do brilho ofuscante.

Como usar estes códigos de cor

1. Encontre seu tom. A lista vai do claro ao escuro, com uma amostra real ao lado de cada nome — percorra como se fosse uma cartela de tintas.
2. Clique em um código para copiar. Cada linha traz o valor hex, RGB e HSL daquela cor. Um clique copia exatamente esse texto para a área de transferência.
3. Cole no seu projeto. Leve o hex para o CSS, o Figma, o Photoshop ou um documento. Clicar na própria amostra também copia o hex, então você não precisa mirar no texto pequeno.

O que o amarelo comunica

O amarelo é a cor de atenção que não ameaça. Placas de aviso, marca-textos e ônibus escolares o usam porque ele oferece o maior contraste de luminância contra o preto entre todas as matizes, seguindo legível à distância e com pouca luz, onde o vermelho falha.

É também a cor mais difícil de usar bem. O #FFFF00 puro sobre branco é quase ilegível e cansa a vista em um parágrafo, então o amarelo costuma funcionar como fundo ou acento, não como texto. Versões mais quentes e profundas — Ouro, Açafrão, Milho #FBEC5D — carregam o otimismo sem o esforço, e por isso dominam nas marcas enquanto o amarelo puro fica na placa de perigo.

Limitações honestas

Um código hex é exato, mas a cor que você vê não é. O mesmo #FF0000 aparece diferente num celular OLED, num monitor de escritório barato e no papel impresso, porque cada dispositivo tem sua própria gama e calibração. Use estes valores como um ponto de partida preciso para tela e sempre confira uma prova física antes de mandar uma cor para gráfica: o CMYK não reproduz todos os tons desta lista.

Os nomes de cor misturam duas coisas. Os marcados com CSS são cores nomeadas oficiais: o nome funciona direto numa folha de estilo e todo navegador o resolve exatamente para aquele hex. Os demais são nomes convencionais — Bordô, Sálvia, Espresso — que não pertencem a nenhum padrão. Seus valores seguem a convenção mais citada, mas outra cartela pode colocá-los um pouco mais claros ou escuros, então cite o hex e não o nome quando o valor exato importar.

Por que é grátis?

O FreeToGenerate.com mantém todas as ferramentas realmente gratuitas. Esta página é uma lista estática de valores de cor exibida no seu navegador: nada para instalar, sem conta e sem versão premium escondendo metade da paleta. Copie quantos códigos precisar, quantas vezes quiser.

Outras famílias de cor

vermelholaranjaverdecianoazulroxorosamarromcinzapretobrancoTodas as famílias