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

O que conta como um tom de branco?

O branco #FFFFFF é um valor único, então uma página de tons de branco é na verdade uma página de off-whites: 17 deles, cada um com uma pitada de matiz. O lado quente reúne Marfim #FFFFF0, Creme #FFFDD0, Linho #FAF0E6 e Pergaminho #FCF5E5; o lado frio traz GhostWhite #F8F8FF e AliceBlue #F0F8FF; e Neve #FFFAFA fica no meio, com o rosa mais leve possível.

Escolher entre eles é uma das decisões de maior retorno num layout. WhiteSmoke #F5F5F5 é o tom padrão de superfície para cards e painéis porque se separa do #FFFFFF sem soar cinza. Casca de Ovo #F0EAD6, Alabastro #EDEADE e Osso #E3DAC9 têm amarelo suficiente para parecer papel, e por isso são a escolha de projetos editoriais ou inspirados em impressos: deixam a tela mais quente sem cor visível.

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

O branco se lê como espaço, não como cor. Passa limpeza, simplicidade e abertura, e no layout seu trabalho principal é o espaço negativo: a quantidade de branco ao redor de um elemento comunica mais qualidade do que o próprio elemento normalmente comunica.

A divisão quente-frio tem significado real. Brancos frios como GhostWhite e AliceBlue se leem como clínicos e técnicos, o registro do design médico e de software. Brancos quentes como Marfim, Creme e OldLace #FDF5E6 se leem como tradicionais, confortáveis e caros: a paleta da papelaria, dos casamentos e das marcas com história. O #FFFFFF puro fica entre os dois e se lê como moderno e um pouco seco, o que funciona no design minimalista e quase nunca em algo que precise parecer acolhedor.

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

vermelholaranjaamareloverdecianoazulroxorosamarromcinzapretoTodas as famílias