Gerador de Código de Cores

Um código de cores é a forma que um computador tem de descrever uma cor sem ambiguidade, já que "azul" pode significar dez tons diferentes, mas #2563EB é sempre exatamente o mesmo azul, em qualquer tela. A ferramenta no topo desta página escolhe a cor visualmente e devolve o código nos três formatos mais usados: HEX, RGB e HSL, prontos para copiar.

Este guia explica a diferença entre os três formatos, quando usar cada um e por que o mesmo valor às vezes aparece escrito de jeitos diferentes em projetos distintos. Se você está procurando uma tabela de cores pronta para escolher um tom por nome, esta página tem outro objetivo: aqui você parte da cor que já tem, ou visualiza, e sai com o código exato dela.

O que é um código de cores

Um código de cores é uma sequência de números ou letras que representa uma cor de forma exata e reproduzível. Sem esse código, descrever uma cor por nome é impreciso: "verde-água" para uma pessoa pode ser "turquesa" para outra, e nenhum dos dois nomes diz ao navegador ou ao editor de imagem exatamente qual pixel pintar.

Existem vários sistemas de representação de cor, e os três que aparecem na ferramenta desta página cobrem praticamente todo uso prático: design de interface, desenvolvimento web, edição de imagem e impressão digital. Cada um descreve a mesma cor de um jeito diferente, e nenhum é "mais certo" que o outro. A escolha depende do contexto.

Código HEX: o formato mais usado em CSS

O código HEX descreve uma cor em base hexadecimal, no formato #RRGGBB. Os dois primeiros dígitos definem a intensidade do vermelho, os dois do meio o verde, e os dois últimos o azul, cada par variando de 00 (nenhum) a FF (máximo). #FFFFFF é branco puro, #000000 é preto puro.

É o formato dominante em CSS e em ferramentas de design como Figma e Photoshop, porque é curto o bastante para escrever à mão e ainda assim representa 16,7 milhões de cores possíveis. Se você já editou o tema de um site ou mexeu numa planilha de marca, provavelmente copiou um código de cores nesse formato sem parar para pensar na matemática por trás dele.

A versão curta de 3 dígitos

Em alguns casos o HEX aparece encurtado, como #FFF em vez de #FFFFFF. Isso só funciona quando os dois dígitos de cada par são idênticos, porque o navegador simplesmente duplica cada caractere internamente. #F0C equivale a #FF00CC, mas um código como #3B7 não representa a mesma cor que #3B370A, então a forma curta só serve para uma fração das cores possíveis.

Geradores de CSS e minificadores costumam preferir a forma longa mesmo quando a curta seria válida, porque é mais fácil de buscar e substituir depois no código. Vale usar a versão de 3 dígitos ao escrever à mão, mas não estranhe se uma ferramenta automática expandir o valor de volta para 6 dígitos.

Código RGB: a cor em três números

O RGB descreve a mesma informação que o HEX, só que em base decimal e separada em três números explícitos: rgb(37, 99, 235) é o mesmo azul de #2563EB, só que escrito de um jeito mais legível para quem não decora tabela hexadecimal. Cada canal vai de 0 a 255.

O RGB aparece mais em contextos de programação e edição de imagem, onde o código precisa ser manipulado matematicamente — somar, subtrair ou interpolar valores de cor é mais direto em decimal do que em hexadecimal. Ferramentas de tratamento de foto, bibliotecas gráficas e linguagens de programação costumam expor a cor nesse formato por esse motivo. Alguns contextos ainda acrescentam um quarto valor, o canal alfa (RGBA), que controla a transparência da cor sem alterar o RGB original.

Código HSL: pensando como um designer

O HSL organiza a cor de um jeito mais parecido com a forma como as pessoas descrevem cor no dia a dia: matiz (0° a 360°, a posição na roda de cores), saturação (0% a 100%, quão viva ou acinzentada) e luminosidade (0% a 100%, quão clara ou escura). hsl(220, 83%, 53%) descreve o mesmo azul dos exemplos anteriores.

A vantagem prática do HSL aparece quando você quer variações da mesma cor. Para escurecer um tom mantendo a mesma identidade, basta reduzir a luminosidade sem tocar no matiz — em HEX ou RGB, o mesmo ajuste exige recalcular os três canais na mão. É por isso que ferramentas de paleta e temas de design costumam trabalhar internamente em HSL, mesmo exportando o resultado final em HEX.

Qual formato usar em cada situação

Na prática, o formato certo depende de onde esse valor vai ser colado. Em CSS e em ferramentas de design, HEX é o padrão de mercado e o que a maioria dos tutoriais assume. Ao programar algo que precisa calcular ou comparar cores, RGB costuma ser mais direto de manipular.

Já quando o objetivo é criar uma paleta de tons relacionados (mais claros, mais escuros, mais saturados), o HSL economiza trabalho, porque cada característica fica isolada num número só. A tabela abaixo resume a mesma cor nos três formatos, para comparação direta.

Contraste: o código de cores certo não basta sozinho

Escolher um código de cores bonito não garante que o texto fique legível sobre o fundo escolhido. Contraste é a diferença de luminosidade entre duas cores, e é ele, não o gosto pessoal, que determina se um parágrafo cinza-claro sobre branco vai ser confortável de ler ou vai cansar a vista em poucos segundos.

O padrão de referência é o WCAG, que define uma proporção mínima de contraste entre texto e fundo: 4.5:1 para texto normal, 3:1 para texto grande. Uma cor pode parecer perfeita no seletor visual e ainda assim reprovar nesse cálculo — por isso ferramentas de contraste dedicadas comparam dois códigos de cor e devolvem a proporção exata, em vez de depender do olho.

Cores nomeadas: um quarto formato que vale conhecer

Além de HEX, RGB e HSL, o CSS aceita um quarto formato: nomes de cor em inglês, como red, cornflowerblue ou rebeccapurple. São 147 nomes padronizados que o navegador já reconhece sem precisar de nenhum código numérico — color: tomato; funciona tão bem quanto color: #FF6347;, porque as duas formas apontam para o mesmo código de cores por trás.

A vantagem das cores nomeadas é a legibilidade do código-fonte; a desvantagem é a falta de precisão — não existe nome para as 16,7 milhões de variações que o HEX cobre, só para uma lista fixa de tons já catalogados. Por isso elas funcionam bem para protótipos rápidos e mau para replicar a cor exata de uma marca, onde o valor precisa bater com precisão de pixel.

Diferença entre código de cores e tabela de cores

Uma dúvida comum é a diferença entre gerar um código de cores e consultar uma tabela de cores pronta. A tabela de cores é uma lista fixa de cores já nomeadas e catalogadas — útil quando você quer inspiração ou já sabe o nome de uma cor padrão e precisa do código correspondente.

Já um seletor como o desta página serve para o caminho contrário: você escolhe a cor visualmente, ou já tem um código em mãos e quer convertê-lo para outro formato. Não depende de a cor estar catalogada em lugar nenhum, já que funciona para qualquer uma das 16,7 milhões de combinações possíveis em HEX.

Erros comuns ao usar um código de cores

O erro mais frequente é esquecer o símbolo # antes do código HEX em CSS, pois sem ele o navegador não reconhece o valor como cor. Outro comum é confundir a ordem dos canais no RGB, especialmente ao migrar código de uma linguagem que usa BGR (azul-verde-vermelho) em vez de RGB, inversão que existe em algumas bibliotecas gráficas mais antigas.

No HSL, o deslize mais comum é esquecer o símbolo de porcentagem nos valores de saturação e luminosidade, já que hsl(220, 83, 53) sem o % não é interpretado da mesma forma em todo lugar. Vale também checar se o valor de matiz não passou de 360, porque alguns editores aceitam o número sem validar e o resultado sai imprevisível. Conferir o código gerado antes de colar no projeto evita esses problemas de uma vez.

Conclusão

Os três formatos de cor descrevem exatamente a mesma informação. Cada um é só otimizado para um uso diferente: HEX para escrever rápido em CSS, RGB para manipular em código, HSL para criar variações de tom sem perder a identidade da cor original.

A ferramenta no topo desta página converte entre os três automaticamente, então não é preciso fazer a conta na mão nem decorar qual formato cada ferramenta espera. Escolha a cor no seletor visual ou digite o código que já tem, e copie o formato que precisar. Guarde este guia como referência para a próxima vez que precisar decidir qual formato usar, seja em CSS, em edição de imagem ou na criação de uma paleta.

Veja também

Se você trabalha com design ou desenvolvimento no dia a dia, estas outras ferramentas do iComLabs também podem ajudar em tarefas que aparecem com frequência nesse tipo de trabalho. Todas funcionam direto no navegador, sem cadastro e sem instalar nada.

Cada uma resolve um problema pontual do mesmo jeito que o conversor de cores desta página: sem instalar nada, sem enviar dado nenhum para servidor e com resultado imediato na tela. São ferramentas pensadas para quem prefere resolver uma tarefa rápida sem abrir um programa pesado só para isso, e todas ficam disponíveis de graça, sempre que precisar.

• Consultar a tabela ASCII
• Contar caracteres de um texto
• Gerar senhas seguras