Conversor de cores

HEX, RGB e HSL descrevem exatamente as mesmas cores; só divergem quanto aos números que vale a pena mostrar a você. O conversor acima aceita qualquer valor hexadecimal e devolve as três notações de uma vez, com uma amostra ao vivo, para que você transite entre um arquivo de design, uma folha de estilos e um seletor de cores sem precisar adivinhar.

Como funciona

Digite um valor hexadecimal ou use o seletor de cores nativo ao lado do campo. A entrada é tolerante onde isso importa:

• O # inicial é opcional — ff0000 e #ff0000 funcionam igualmente.
• A forma abreviada de três dígitos é expandida, então #f00 dá o mesmo resultado que #ff0000.
• Maiúsculas e minúsculas não fazem diferença; a saída canônica é hexadecimal de seis dígitos em minúsculas.

Qualquer outra coisa — um nome de cor, um valor malformado de quatro caracteres, um caractere não hexadecimal — é rejeitada com uma mensagem curta em vez de virar preto silenciosamente. Cada uma das três saídas tem seu próprio botão de copiar, então você pode colar rgb(59, 130, 246) direto em uma folha de estilos ou hsl(217, 91%, 60%) em um arquivo de design tokens.

A conversão é exata em um sentido e arredondada no outro. De hexadecimal para RGB é uma leitura sem perdas de três bytes em base 16. De RGB para HSL envolve divisões, e matiz, saturação e luminosidade são arredondados para números inteiros para facilitar a leitura — por isso, fazer o caminho de volta de HSL para hexadecimal pode dar uma ou duas unidades de diferença em algum canal. Se você precisa de valores exatos byte a byte, mantenha o hexadecimal como fonte da verdade.

Qual notação usar e quando

HEX é compacto e sem ambiguidade, e é por isso que domina os handoffs de design e as folhas de estilos. Também é ilegível: nada em #3b82f6 diz que se trata de um azul de luminosidade média, nem como ele se relaciona com #2563eb.

RGB expõe os três canais diretamente. É a notação certa quando você manipula canais via código — composição, troca de canais, geração de imagens — e é a forma com que as APIs de canvas e de imagem de fato trabalham.

HSL é a escolha quando você está projetando, e não transcrevendo. O matiz é um ângulo no círculo cromático (0 vermelho, 120 verde, 240 azul), a saturação é a quantidade de cor e a luminosidade vai do preto em 0% ao branco em 100%. Montar uma paleta vira então algo mecânico: fixe o matiz e a saturação, varie a luminosidade e você terá um conjunto consistente de tons. Mudar só o matiz dá uma cor de destaque que combina. Fazer o mesmo à mão em hexadecimal significa fazer contas em base 16 com três números interdependentes.

O CSS aceita as três, além das formas modernas separadas por espaços e com canal alfa — rgb(59 130 246 / 50%). Elas equivalem às formas com vírgulas que esta ferramenta gera; use a que o seu codebase já usa em vez de misturá-las. Fundamentos de HTML5 mostra onde os valores de cor entram no modelo de documento e de estilos, e fundamentos de JavaScript é o ponto de partida se você calcula esses valores em tempo de execução em vez de escrevê-los à mão.

Vale a pena saber

A luminosidade do HSL não é o brilho percebido. hsl(60, 100%, 50%) (amarelo) e hsl(240, 100%, 50%) (azul) declaram a mesma luminosidade e não se parecem em nada — o olho é muito mais sensível ao verde do que ao azul. É por isso que não dá para avaliar acessibilidade pelo HSL, e é por isso que o verificador de contraste calcula, em vez disso, uma luminância relativa ponderada.

A opacidade não faz parte desta conversão. A ferramenta lida com cores opacas; hexadecimal de oito dígitos com canal alfa não é aceito. Mantenha o alfa separado — ele é uma instrução de composição, não uma propriedade da cor.

Hexadecimal é sRGB. Notações de gamut amplo, como oklch() e color(display-p3 ...), podem expressar cores que não têm nenhum equivalente em hexadecimal. Se um valor veio de uma ferramenta de design com gamut amplo, convertê-lo para hexadecimal recorta o valor.