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

O que conta como um tom de preto?

Só existe um preto verdadeiro, o #000000, e as outras 11 entradas abaixo são os quase pretos que os designers de fato usam: Carvão #36454F, Ônix #353935, Preto Azeviche #343434, Preto Fosco #28282B, Preto Passa #242124 e Alcaçuz #1B1212, entre outros. Cada um guarda um traço de matiz — o Carvão é azul, o Alcaçuz é vermelho, o Ébano #555D50 é verde — e esse traço é justamente o ponto.

O #000000 puro sobre branco puro é o maior contraste que uma tela produz e, para texto longo, costuma ser demais: o brilho faz as bordas vibrarem e cansa a vista, sobretudo em telas OLED, onde os pixels pretos ficam de fato apagados. A maioria dos projetos cuidadosos define o texto corrido em #1B1B1B ou #242124 e reserva o preto puro para acentos. A mesma regra vale na gráfica, onde um preto rico misturado a outras tintas reproduz muito melhor do que 100% de preto sozinho.

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

O preto é a cor de maior autoridade disponível. Lê-se como premium, formal e definitivo, e por isso é o padrão de embalagens de luxo, roupa de gala e eletrônicos de ponta — e por isso uma paleta em preto e branco é o recurso confiável quando uma marca quer parecer séria em vez de simpática.

É também o mais dependente de contexto. No design ocidental o preto carrega ao mesmo tempo luto e sofisticação, sem ambiguidade real na prática, porque o contexto decide qual se aplica. Em boa parte do Leste Asiático é o branco que ocupa o papel funerário. Usado como fundo, o preto faz as cores sobre ele parecerem mais saturadas, o que favorece a fotografia de produto e obriga a reduzir a intensidade dos acentos em temas escuros de interface.

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

vermelholaranjaamareloverdecianoazulroxorosamarromcinzabrancoTodas as famílias