Converter HEX em HSL Hexadecimal ↔ Hue Saturation Lightness Grátis Online Seguro
Escreva um valor em HEX e leia-o de imediato em HSL. A conta faz-se no seu navegador, nada é enviado para lugar nenhum, e aquilo de que o resultado depende está escrito mais abaixo em vez de ser presumido.
Nada é enviado
De onde vêm estas notações
O hexadecimal e o RGB são a mesma coisa escrita duas vezes. Uma cor de tela são três números — quanta luz vermelha, verde e azul emitir — cada um de 0 a 255, ou seja um byte; o hexadecimal escreve simplesmente esses bytes na base dezesseis, de modo que #FF8800 e rgb(255, 136, 0) são a mesma ordem ao mesmo pixel. O HSL foi inventado porque nenhum dos dois é legível por um humano: dá o matiz como um ângulo numa roda de cores, com saturação e luminosidade em percentagem, de modo que um designer pode clarear algo sem recalcular três números. O CMYK pertence a um mundo totalmente diferente — ao da tinta, não ao da luz. É subtrativo, construído com quatro chapas de impressão, e não alcança todas as cores de um tela, porque o tela emite luz enquanto o papel apenas a reflete.
Onde as encontra
O hexadecimal é o que se escreve numa planilha de estilo e o que uma ferramenta de desenho lhe entrega. O RGB aparece onde quer que uma cor precise de aritmética: gradientes, transparência, código que calcula um tom. Ao HSL recorre-se ao afinar uma paleta à mão, porque as alterações pretendidas são em geral alterações de um dos seus três números. O CMYK é o que a gráfica pede, e converter para ele é o instante em que um desenho deixa de ser luz e passa a ser tinta.
Perguntas frequentes
Por que o meu resultado CMYK difere do que a gráfica me dá?
Porque não existe uma única conversão correta. A aritmética desta página é a simples, independente do dispositivo, e é a resposta certa quando se precisa de um ponto de partida ou de um equivalente aproximado. Uma gráfica converte através de um perfil de cor que tem em conta a tinta, o papel e a máquina concretos, e a mesma cor RGB dará valores CMYK diferentes em papel couché brilhante e em papel não revestido. Para o que tenha de coincidir, peça à gráfica o perfil dela em vez de confiar numa fórmula.
Por que algumas cores de tela não se podem imprimir?
Porque os dois não alcançam as mesmas cores. Um tela faz cor somando luz e consegue um ciano ou um verde vivo e saturado que a tinta simplesmente não iguala; o papel faz cor absorvendo luz, e o mais claro que pode ser é o branco da página. O conjunto de cores que cada um alcança chama-se gamute, e onde não se sobrepõem, uma conversão tem de escolher a cor disponível mais próxima. É por isso que uma cor viva na tela parece muitas vezes um pouco apagada no papel.
O resultado é exato?
Onde as duas unidades se definem uma pela outra com números inteiros, sim — a página informa isso acima do número, e o único arredondamento está em quantos dígitos se mostram. Onde a razão não tem decimal finita, a página mostra doze algarismos significativos e diz que a relação é aproximada, em vez de fingir o contrário.
Alguma coisa que escrevo sai do meu aparelho?
Não. A aritmética roda no seu navegador; nada é enviado, e nem sequer há servidor para o receber. Carregada uma vez, a página continua funcionando com a rede desligada.
Por que converter HEX em HSL
Um código hex como #5A4632 é um ótimo jeito de guardar uma cor e um péssimo jeito de pensar nela. Nada nos dígitos diz que a cor é um marrom, quão clara ela é ou como ficaria uma versão um pouco mais pálida. O HSL foi inventado para corrigir isso. Ele descreve uma cor do modo como as pessoas costumam falar dela: qual é o matiz, quão viva ela é e quão clara ela é. Converter HEX em HSL é traduzir uma cor da forma que uma ferramenta de design lhe entrega para a forma com que você consegue raciocinar: hsl(30, 29%, 28%) é um marrom-alaranjado escuro e apagado, e você vê de imediato que aumentar o último número a deixará mais pálida.
Esse é o verdadeiro motivo pelo qual designers e desenvolvedores de front-end usam a conversão. Eles têm uma cor de marca em hex e precisam de uma família de cores relacionadas: uma mais clara para o estado de passar o mouse, uma mais escura para um botão pressionado, uma bem pálida para um fundo suave, uma dessaturada para um controle desativado. Em hex, cada uma delas é uma nova caça a três pares de dígitos. Em HSL, cada uma é a mudança de um número. A cor é a mesma cor, vista por uma lente mais útil.
Esta página converte no seu navegador, e nada é enviado. Abaixo você encontra como os três números do HSL são calculados a partir dos dígitos hex, o que a conversão mantém e onde arredonda, o que matiz, saturação e luminosidade significam na prática, como os designers usam o HSL para montar paletas e estados e as armadilhas que pegam quem converte HEX em HSL pela primeira vez.
O que o HSL descreve
Matiz: a posição na roda de cores
O matiz é um ângulo de 0 a 360 graus em torno de uma roda de cores. O vermelho fica em 0, o amarelo em 60, o verde em 120, o ciano em 180, o azul em 240 e o magenta em 300; em 360 você volta ao vermelho. Um matiz de 30 fica entre o vermelho e o amarelo, que é o laranja. O número diz em qual família de cor você está, e nada sobre quão viva ou pálida ela é.
Saturação: quão viva
A saturação é uma porcentagem. Em 100% a cor é tão pura quanto o matiz permite; em 0% ela perdeu toda a cor e é um cinza. Uma saturação de 29%, como no nosso marrom de exemplo, é uma cor apagada e terrosa. Diminuir a saturação é o jeito mais rápido de acalmar uma cor berrante sem mudar o seu caráter.
Luminosidade: quão pálida ou escura
A luminosidade também é uma porcentagem. Em 0% a cor é preta seja qual for o matiz e a saturação; em 100% é branca; em 50% é a cor plena, normal. O nosso marrom a 28% está do lado escuro. Aumentar o número dá uma versão mais pálida da mesma cor, e diminuí-lo uma mais escura, que é exatamente a mudança que os designers mais querem.
Por que é mais fácil que o hex
Em hex, deixar uma cor mais pálida significa aumentar os três pares por quantidades diferentes para que o matiz não se desvie, o que é quase impossível de fazer a olho. Em HSL significa mudar um único número e deixar os outros dois em paz.
Como a conversão funciona
De três bytes a um ângulo e duas porcentagens
O conversor primeiro lê os dígitos hex como os valores de vermelho, verde e azul, cada um de 0 a 255, e os escala para entre 0 e 1. Encontra o maior e o menor dos três. A luminosidade é a média dos dois. A saturação depende de quão distantes eles estão, em relação à luminosidade. O matiz depende de qual canal é o maior e de como os outros dois se comparam. Se os três forem iguais, a cor é um cinza, a saturação é zero e o matiz não tem significado; o conversor então mostra 0 para ele.
O exemplo
Para #5A4632 os bytes são 90, 70 e 50. O vermelho é o maior, com 0,353, e o azul o menor, com 0,196. A luminosidade é metade da soma deles, 0,275, cerca de 28%. A amplitude é 0,157, então a saturação é 0,157 dividido pela soma 0,549, cerca de 29%. O vermelho é o canal maior e o verde fica no meio, o que coloca o matiz em 30 graus. O resultado é hsl(30, 29%, 28%).
Números inteiros
Os três números são arredondados para graus inteiros e porcentagens inteiras quando escritos. Essa é a forma que as pessoas usam e a que o CSS espera no trabalho cotidiano, mas significa que alguma informação é descartada no último dígito, como a próxima seção explica.
O que a conversão mantém e o que não consegue
Mantém a cor como o olho a classifica
O resultado é a cor como o olho a classifica: um matiz na roda, quão saturada ela é, quão clara. É por isso que vale a pena ter o HSL. Você pode deixar uma cor mais pálida ou um tom mais escuro mudando um número, o que é quase impossível em hex.
Não pode prometer os mesmos bytes de volta
Os dois descrevem as mesmas cores, mas o HSL chega a elas por uma geometria diferente e seus três números são arredondados para graus inteiros e porcentagens inteiras quando escritos. Assim, uma cor levada ao HSL e trazida de volta pode cair a um ou dois passos de onde começou: visualmente a mesma, mas não byte por byte a mesma. Se você precisa dos bytes exatos de volta, guarde o hex. Converta HEX em HSL para trabalhar com uma cor e guarde o hex como matriz.
Cinzas não têm matiz
Quando os três bytes são iguais, não há nada a dizer sobre o matiz. O conversor dá um matiz de 0 e uma saturação de 0%, e só a luminosidade descreve o cinza. Não leia nada no 0.
Usando o HSL na prática
Montando uma família de tons
Pegue a cor-base hsl(30, 29%, 28%). Um tom mais claro para o hover é hsl(30, 29%, 34%). Um tom bem pálido para um fundo é hsl(30, 29%, 94%). Um tom mais escuro para estados pressionados é hsl(30, 29%, 22%). O matiz e a saturação ficam parados, então as cores obviamente pertencem ao mesmo conjunto. Fazer o mesmo em hex levaria várias tentativas e ainda ficaria um pouco fora.
Temas e modo escuro
Um tema muitas vezes precisa da mesma paleta numa versão clara e numa escura. Com o HSL, você mantém o matiz e ajusta a luminosidade e a saturação: clareia os fundos e escurece o texto para o tema claro, e o inverso para o escuro. Definir o matiz como propriedade personalizada e variar só a luminosidade é um jeito comum e organizado de fazer isso.
Gerando paletas
Para achar cores que combinam com uma base, gire o matiz. Trinta graus para cada lado dá cores análogas, 180 dá a complementar, e 120 ou 240 dão uma tríade. Fixe a saturação e a luminosidade, mude o matiz, e as cores têm um ar uniforme. É um jeito rápido de começar uma paleta que não parece aleatória.
Contraste acessível
A luminosidade é o principal controle do contraste. Se o texto é difícil de ler sobre um fundo colorido, a solução costuma ser aumentar a diferença de luminosidade entre eles, e o HSL transforma isso em ajustar um número de cada lado.
Como converter HEX em HSL aqui
Digite ou cole o código hex
Digite a cor no primeiro campo, com ou sem o sinal de jogo da velha. As formas de três e de seis dígitos são aceitas, e a forma de oito dígitos com transparência também é lida.
Leia o valor hsl
A resposta aparece na hora, como em #5A4632 = hsl(30, 29%, 28%). Os três números são o matiz em graus e a saturação e a luminosidade em porcentagem.
Copie para a sua folha de estilos
Use o resultado como está, numa regra como color: hsl(30, 29%, 28%). Para ajustar a cor, mude o último número. A ferramenta para o sentido oposto é HSL para HEX.
De onde vêm essas notações
Hex e RGB são a mesma coisa escrita duas vezes
Uma cor de tela são três números, quanta luz vermelha, verde e azul emitir, cada um de 0 a 255, o que é um byte. O hex simplesmente escreve esses bytes na base dezesseis. Para ver os números, converta HEX em RGB.
HSL e CMYK
O HSL foi inventado porque nenhum dos dois é legível para um humano: ele dá o matiz como um ângulo em torno de uma roda de cores, com saturação e luminosidade como porcentagens, de modo que um designer pode deixar algo mais claro sem recalcular três números. O CMYK pertence a um mundo totalmente diferente, o da tinta em vez da luz. É subtrativo, construído a partir de quatro chapas de impressão, e não consegue alcançar todas as cores que uma tela alcança, porque a tela emite luz enquanto o papel apenas a reflete.
Armadilhas ao converter HEX em HSL
Esperar uma ida e volta perfeita
Por causa do arredondamento, converter de volta pode dar um código a um ou dois passos do original. Para uma única cor é invisível. Para um sistema de design em que muitas cores são convertidas de um lado para o outro, pode se acumular. Mantenha o hex como fonte.
Supor que luminosidade igual significa brilho igual
Duas cores com a mesma luminosidade HSL podem parecer bem diferentes em brilho: um amarelo a 50% parece muito mais brilhante que um azul a 50%. A luminosidade HSL é um número conveniente, não uma medida do brilho percebido. Para verificar contraste, use uma ferramenta de contraste adequada.
Esquecer os sinais de porcentagem
No CSS, a saturação e a luminosidade em hsl() levam sinais de porcentagem, e o matiz é um número simples ou um número com deg. Deixar os sinais de fora é um erro clássico.
Ler demais num cinza
Um cinza não tem matiz. Se o conversor mostra 0 para ele, isso não significa que seja avermelhado.
Perguntas que as pessoas fazem antes de converter
Quanto é #FF0000 em HSL?
hsl(0, 100%, 50%), vermelho puro.
Quanto é #FFFFFF em HSL?
hsl(0, 0%, 100%), branco. O matiz não tem significado para o branco, e o conversor mostra 0.
O HSL é suportado em toda parte?
Todos os navegadores atuais entendem hsl() e hsla(). Ele está no CSS há muitos anos.
A conversão é exata?
É exata no sentido de descrever a mesma cor, mas os números são arredondados para graus e porcentagens inteiros, então voltar pode cair um passo adiante.
A minha cor é enviada?
Não. A aritmética roda no seu navegador e nada é enviado a lugar nenhum.
Como volto?
Com HSL para HEX.
Escolhendo com sabedoria ao converter HEX em HSL
Use o HSL para trabalhar, o hex para guardar
Mantenha a paleta-matriz em hex, onde ela é inequívoca, e use o HSL quando quiser criar variações. As idas e voltas perdem um pouco; a matriz não.
Considere espaços de cor mais novos
O CSS agora oferece oklch() e notações parecidas em que luminosidade igual realmente parece igual. Vale a pena aprendê-las para novos sistemas de design. O HSL continua sendo a notação que quase todos entendem e que toda ferramenta suporta.
Use propriedades personalizadas
Defina --hue, --sat e --light e construa as cores a partir delas: hsl(var(--hue) var(--sat) var(--light)). Um tema então muda editando alguns números.
Lendo e escrevendo HSL com confiança
Alguns pontos de referência para lembrar
Alguns números tornam o HSL mais fácil de ler. Os matizes em múltiplos de 60 são as cores puras: 0 vermelho, 60 amarelo, 120 verde, 180 ciano, 240 azul, 300 magenta. Uma luminosidade de 50 com saturação de 100 dá a versão mais pura de qualquer matiz, e uma luminosidade de 95 ou mais é um tom tão pálido que funciona como fundo. Quando você converte HEX em HSL e vê um matiz perto de um desses pontos de referência, pode nomear a família da cor de relance.
Passando de uma família a outra
Somar 180 a um matiz dá a cor oposta na roda, que é a complementar e costuma ser o contraste mais forte. Somar ou subtrair 30 dá uma vizinha que fica confortável ao lado da original. Os designers usam esses passos para escolher destaques que combinam com uma cor de marca sem adivinhar.
Guardando uma anotação dos valores convertidos
Quando você converte HEX em HSL para uma paleta, escreva os resultados numa tabela com o hex original ao lado. A tabela mostra como as cores se relacionam, e se um matiz ou uma luminosidade estiver fora de linha com os outros, a esquisitice fica visível de imediato. Ela também dá à sua equipe uma referência compartilhada.
Testando em telas reais
Cores que parecem equilibradas num monitor calibrado podem parecer diferentes num celular sob o sol ou num notebook barato. Confira a paleta pronta em pelo menos dois dispositivos e ajuste um pouco a luminosidade se os tons pálidos sumirem num deles.
Conversores relacionados
A mesma família de ferramentas cobre as conversões vizinhas. Para voltar, use HSL para HEX. Para os números por trás do código, há HEX para RGB e RGB para HEX, e para impressão, HEX para CMYK e CMYK para HEX. Para os tamanhos na mesma folha de estilos, px para rem e px para em fazem para comprimentos o que esta página faz para cores.
Um exemplo resolvido
Digamos que a cor da sua marca seja #1E7A5C. Você converte HEX em HSL e lê hsl(160, 61%, 30%). Para um estado de hover você escreve hsl(160, 61%, 36%), um pouco mais claro. Para um estado pressionado, hsl(160, 61%, 24%). Para um fundo bem pálido atrás de um aviso, hsl(160, 40%, 95%). Para um botão desativado, hsl(160, 12%, 60%), o mesmo matiz com a maior parte da cor tirada. Cinco cores, um matiz, escritas em um minuto, e todas parecem pertencer ao mesmo conjunto. Quando a cor da marca muda, você muda o número do matiz uma vez.
Uma lista de conferência curta
Antes de converter
Decida o que quer fazer com a cor: variá-la, usá-la num tema ou apenas lê-la.
Durante a conversão
Cole o hex, leia o hsl e anote os três números.
Depois de converter
Faça as variações mudando um número de cada vez e olhe-as sobre o fundo real.
Erros comuns
Tratar os números arredondados como exatos
São números inteiros. Guarde o hex como matriz.
Igualar luminosidade a brilho
Duas cores com a mesma luminosidade podem diferir muito no brilho com que parecem.
Deixar de fora os sinais de porcentagem
A saturação e a luminosidade precisam deles no CSS.
As suas cores ficam no seu dispositivo
O cálculo acontece localmente. Os seus valores são usados pelo seu próprio navegador e nada é enviado a lugar nenhum. Não há nada a apagar depois e nenhuma conta a criar. Essa é a maneira simples de converter HEX em HSL.
Resumo
Para converter HEX em HSL aqui, digite ou cole o código hex e leia o valor hsl na hora. A conversão mantém a cor como o olho a classifica: um matiz na roda, quão saturada ela é, quão clara. É por isso que vale a pena ter o HSL, já que você pode deixar uma cor mais pálida ou um tom mais escuro mudando um número, o que é quase impossível em hex. Os dois descrevem as mesmas cores, mas o HSL chega a elas por uma geometria diferente e seus três números são arredondados para graus inteiros e porcentagens inteiras, então uma cor levada ao HSL e trazida de volta pode cair a um ou dois passos de onde começou. Se você precisa dos bytes exatos de volta, guarde o hex. Nada é enviado.