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

O que conta como um tom de cinza?

Cinza é o que se obtém quando vermelho, verde e azul valem o mesmo: o Cinza #808080 é exatamente isso, assim como LightGray #D3D3D3, Prata #C0C0C0 e DimGray #696969. Os 16 tons abaixo vão de Gainsboro #DCDCDC na ponta clara até DarkSlateGray #2F4F4F, e são o esqueleto de praticamente toda interface: bordas, divisórias, estados desativados e texto secundário moram nesta lista.

As entradas interessantes são as que não são de fato neutras. SlateGray #708090 e LightSlateGray #778899 trazem um véu azul; o Cinza Cinza-esverdeado #B2BEB5 puxa para o verde; Carvão #36454F é azul o bastante para parecer quase marinho em tamanhos pequenos. Esses cinzas tingidos são o que faz uma paleta parecer deliberada: uma página feita só de neutros puros costuma ficar chapada, enquanto outra em que os cinzas compartilham um leve tom com a cor da marca fica composta.

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 cinza comunica

O cinza é a cor da contenção. Passa neutralidade, profissionalismo e precisão, e é a cor mais segura para grandes áreas porque nunca compete com o conteúdo — exatamente por isso o design editorial e de interface se apoia tanto nele.

Seu risco é o outro lado da mesma virtude: cinza demais sem alívio soa sombrio, corporativo ou inacabado. A solução raramente é mais cor, e sim mais faixa de contraste — opor Gainsboro a Carvão em vez de amontoar vários cinzas médios. Prata e Peltre #899499 acrescentam um registro metálico que sugere tecnologia e hardware premium, e por isso dominam na eletrônica de consumo.

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

vermelholaranjaamareloverdecianoazulroxorosamarrompretobrancoTodas as famílias