Converter HSL em HEX Hue Saturation Lightness ↔ Hexadecimal Grátis Online Seguro
Escreva um valor em HSL e leia-o de imediato em HEX. 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 HSL em HEX
Você definiu uma cor em HSL, porque é a notação em que se consegue pensar: matiz 30, saturação 29%, luminosidade 28%, um marrom apagado, e uma versão mais pálida a 34% para o estado de hover. Agora a cor precisa ir para algum lugar que quer um código hex: um arquivo de tokens de design, uma ficha de marca, uma ferramenta que não entende hsl(), um modelo de e-mail, uma mensagem a um colega. Converter HSL em HEX é pegar a cor sobre a qual você raciocinou e escrevê-la na forma que é curta, inequívoca e entendida por tudo.
A conversão funciona no sentido oposto àquele que os designers encontram primeiro. Parte de três números amigáveis ao humano e chega a três bytes. Cada etapa é aritmética direta, mas envolve alguns casos do tipo trigonométrico e arredondamento, e é por isso que as pessoas preferem que alguém faça por elas. A página faz isso no seu navegador, e nada é enviado. Abaixo você encontra como os três números viram os seis dígitos hex, o que a conversão mantém, por que uma cor que passou pelo HSL pode cair um ou dois passos de onde começou, as maneiras como os designers usam a conversão e as armadilhas a evitar.
Como a conversão funciona
De matiz, saturação e luminosidade a vermelho, verde e azul
O conversor primeiro calcula o croma, que é quão longe a cor está do cinza: ele cresce com a saturação e diminui à medida que a luminosidade se afasta de 50%. Depois coloca o matiz num dos seis setores da roda de cores, cada um com 60 graus de largura, e a partir do setor decide qual dos três canais está no máximo, qual no mínimo e qual no meio. Por fim soma uma constante para que a luminosidade saia certa, escala os três valores do intervalo de 0 a 1 para 0 a 255 e arredonda cada um para um número inteiro. Esses três bytes são escritos na base dezesseis, com dois dígitos cada.
Um exemplo com números
Pegue hsl(30, 29%, 28%). O croma é (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624. O matiz de 30 graus está na metade do primeiro setor, então o canal do meio é metade do croma, 0,0812. A constante a somar é 0,28 − 0,0812 = 0,1988. Assim o vermelho é 0,1624 + 0,1988 = 0,3612, o verde é 0,0812 + 0,1988 = 0,28 e o azul é 0,1988. Multiplicados por 255 e arredondados, são 92, 71 e 51. Em hex, isso é #5C4733.
Cinzas
Quando a saturação é 0%, a cor é um cinza seja qual for o matiz, e os três bytes são iguais. hsl(0, 0%, 50%) é #808080. O matiz é ignorado, então qualquer número de matiz dá o mesmo cinza.
O que a conversão mantém e o que não consegue
Mantém a cor como você a descreveu
O resultado é a cor cujo matiz, saturação e luminosidade você deu, escrita como bytes. Os três números que você digitou são 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, e a conversão leva a sua escolha ao hex com fidelidade.
Não pode prometer os mesmos números na 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. No nosso exemplo, #5A4632 era uma cor cujo HSL é cerca de hsl(30, 29%, 28%); converter esses números arredondados de volta dá #5C4733, dois passos adiante no vermelho. Se você precisa dos bytes exatos, guarde o hex.
Sinais de porcentagem e de grau
A página lê o matiz em graus e a saturação e a luminosidade em porcentagem. Você pode escrevê-los com ou sem os sinais. Um matiz acima de 360 ou abaixo de 0 é enrolado em torno da roda, então 390 é o mesmo que 30.
Usos práticos
Escrevendo um arquivo de tokens de design
Um sistema de design guarda as cores como tokens. Muitas equipes criam as cores em HSL, porque conseguem raciocinar sobre elas, e as publicam em hex, porque toda ferramenta o lê. Converta HSL em HEX uma vez para cada token, e o arquivo publicado é algo que todos podem usar.
Produzindo cores para ferramentas que não leem hsl()
Clientes de e-mail, alguns editores de documentos, programas gráficos mais antigos e muitas bibliotecas de gráficos aceitam apenas hex. Tudo o que você definiu em HSL precisa ser convertido antes que elas possam usar.
Conferindo uma paleta gerada
Um script que gera uma paleta girando o matiz dá uma lista de valores hsl(). Para vê-los como os códigos que você poria numa folha de estilos ou entregaria a um designer, converta cada um para hex. Isso também permite identificar valores que arredondam para o mesmo código e, portanto, não são realmente diferentes.
Compartilhando uma cor numa mensagem
Um código hex é curto, copiável e entendido por quase todos que trabalham com cor. Um valor hsl() é mais longo e menos familiar fora do design. Quando você manda uma cor a alguém, o hex é a forma cortês.
Como converter HSL em HEX aqui
Digite ou cole o valor hsl
Digite a cor no primeiro campo na forma hsl(30, 29%, 28%), ou apenas os três números. O matiz é em graus, a saturação e a luminosidade em porcentagem.
Leia o código hex
A resposta aparece na hora, como em hsl(30, 29%, 28%) = #5C4733. Ela é escrita com letras maiúsculas e um sinal de jogo da velha.
Copie para o seu trabalho
Use o código na sua folha de estilos, no arquivo de tokens ou na mensagem. Para o sentido oposto, HEX para HSL está a um clique.
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 HSL em HEX
Esperar o código original de volta
Se você partiu de um código hex, converteu-o em HSL, não ajustou nada e converteu de volta, pode obter um código diferente a um ou dois passos de distância. Para uma única cor é invisível. Para um sistema de design, decida qual forma é a matriz e trate a outra como derivada.
Trocar saturação e luminosidade
Os dois são fáceis de trocar por engano: hsl(30, 28%, 29%) não é hsl(30, 29%, 28%). A ordem é matiz, saturação, luminosidade. Se a cor na tela não parece o que você esperava, confira se não os inverteu.
Esquecer que luminosidade não é brilho
Duas cores com a mesma luminosidade podem parecer diferentes em brilho. O amarelo a 50% de luminosidade parece muito mais brilhante que o azul a 50%. Se você está escolhendo cores para texto e fundo, confira o contraste com uma ferramenta adequada, não comparando números de luminosidade.
Usar valores fora da faixa
A saturação e a luminosidade são limitadas de 0 a 100 por cento. Os valores fora dessa faixa são cortados. Uma luminosidade de 120% não é mais brilhante que o branco; é branco.
Perguntas que as pessoas fazem antes de converter
Quanto é hsl(0, 100%, 50%) em hex?
#FF0000, vermelho puro.
Quanto é hsl(0, 0%, 100%) em hex?
#FFFFFF, branco.
Posso usar decimais?
Sim. hsl(30.5, 28.6%, 27.8%) é aceito. O resultado é arredondado para bytes inteiros.
A conversão é exata?
Ela dá os bytes exatos para os números que você digitou, arredondados para valores inteiros. Voltar pode cair um passo adiante, porque os números HSL foram arredondados.
A minha cor é enviada?
Não. A aritmética roda no seu navegador e nada é enviado a lugar nenhum.
Como volto?
Com HEX para HSL.
Escolhendo com sabedoria ao converter HSL em HEX
Decida qual forma é a matriz
Se você projeta em HSL, mantenha os valores HSL como fonte e publique o hex como saída. Se a marca lhe dá hex, guarde isso e use o HSL só para variações. Misturar os dois como fontes iguais é o que cria a deriva.
Use o HSL para variar, o hex para fixar
Quando você precisa de uma família de tons, trabalhe em HSL. Quando precisa fixar uma cor para que seja idêntica em toda ferramenta, escreva-a como hex.
Guarde os números que você digitou
Registre os valores HSL ao lado do hex na sua nota de paleta. Se alguém depois quiser uma versão mais pálida, pode partir dos seus números e não de um código que já foi arredondado.
Os seis setores da roda
Qual canal está alto, qual está baixo
A conversão divide a roda em seis setores de 60 graus, e em cada um deles um canal está no máximo, um no mínimo e o terceiro muda suavemente. De 0 a 60, o vermelho está no máximo, o azul no mínimo e o verde sobe: o vermelho vira amarelo. De 60 a 120, o verde está no máximo e o vermelho cai: o amarelo vira verde. De 120 a 180, o verde continua alto e o azul sobe: o verde vira ciano. De 180 a 240, o azul assume e o verde cai. De 240 a 300, o azul continua alto e o vermelho sobe: o azul vira magenta. De 300 a 360, o vermelho assume de novo e o azul cai. Ao converter HSL em HEX, ajuda saber em que setor está o seu matiz, porque isso diz qual dos três pares da resposta será o maior.
Por que a resposta tem ar de família
Cores do mesmo matiz e saturação, mas de luminosidade diferente, dão códigos hex que parecem parentes: o mesmo padrão de qual par é alto e qual é baixo, apenas ampliado ou reduzido. #5C4733, #7A5F44 e #A38461 estão todos na mesma família, com o vermelho maior, depois o verde, depois o azul. Você pode aprender a ler isso de relance, e isso facilita pegar erros.
Construindo uma rampa de luminosidade
Um matiz, nove passos
Um uso muito prático da conversão é construir uma rampa de uma única cor, de muito pálida a muito escura, o tipo de escala que os sistemas de design rotulam 50, 100, 200 e assim por diante até 900. Escolha um matiz e uma saturação e percorra a luminosidade por valores como 96, 90, 80, 70, 60, 50, 40, 30 e 20 por cento. Converta HSL em HEX para cada passo, e você tem nove códigos que combinam entre si. Reduzir um pouco a saturação nos extremos, alguns pontos nos passos mais pálidos e mais escuros, muitas vezes fica mais natural do que mantê-la constante.
Nomeando os passos
Dê a cada passo um nome que registre a sua função, não o seu valor: superfície para o mais pálido, borda para o seguinte, texto para o mais escuro. No código, um nome diz ao próximo leitor para que serve a cor, e você pode mudar o número por trás dele sem tocar nas regras que o usam.
Temas claro e escuro
Espelhando a rampa
Um tema escuro costuma ser o tema claro com a rampa virada de cabeça para baixo: o passo mais pálido vira o fundo da página no tema claro e o mais escuro vira o fundo no escuro. Se você construiu a rampa em HSL, o tema escuro não lhe custa nada além de um segundo conjunto de conversões. Mantenha o matiz fixo, o que preserva o caráter da marca, e ajuste um pouco a saturação, já que cores saturadas tendem a parecer ásperas em fundos escuros.
Conferindo os dois temas
Teste cada par de texto e fundo dos dois temas quanto ao contraste. Uma cor que funciona no branco pode falhar num quase preto, e a conferência leva um minuto com uma ferramenta de contraste e os códigos hex que você acabou de produzir.
Quando você só tem uma ideia vaga da cor
Comece pela roda, depois refine
Às vezes você não tem um código hex, só uma ideia: um azul calmo, um laranja quente, um verde fresco. O HSL é um bom lugar para começar, porque você pode escolher um matiz pelos pontos de referência da roda, definir uma saturação moderada e uma luminosidade intermediária e depois converter HSL em HEX para ver o que tem. Se parecer berrante demais, diminua a saturação; se parecer chapado, mova a luminosidade. Cada tentativa custa segundos, e você termina com um código hex que pode pôr direto numa folha de estilos.
Conversores relacionados
A mesma família de ferramentas cobre as conversões vizinhas. Para voltar, use HEX para HSL. 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 faz para comprimentos o que esta página faz para cores.
Um exemplo resolvido
Digamos que você escolheu um verde para o estado de sucesso de um aplicativo: hsl(145, 55%, 38%). Você o digita e lê #2C9658. Usa esse código no arquivo de tokens como --success. Para o fundo de um aviso de sucesso você pega o mesmo matiz, hsl(145, 45%, 94%), e lê #E9F7EF. Para a borda, hsl(145, 45%, 78%), que lê #AEE0C3. Três códigos, um matiz, todos derivados em um minuto, e cada um um simples código hex que qualquer ferramenta da equipe consegue abrir.
Uma lista de conferência curta
Antes de converter
Confira a ordem dos três números: matiz, saturação, luminosidade. Decida qual forma é a sua matriz.
Durante a conversão
Digite os valores, leia o hex e copie-o com o sinal de jogo da velha.
Depois de converter
Olhe a cor na tela em contexto e anote os valores HSL ao lado do código para depois.
Erros comuns
Trocar saturação e luminosidade
A ordem é matiz, saturação, luminosidade.
Esperar recuperar o hex antigo
Pode cair um passo adiante. Guarde o original se isso importar.
Comparar luminosidade em vez de contraste
Use uma ferramenta de contraste para texto e fundo.
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 HSL em HEX.
Resumo
Para converter HSL em HEX aqui, digite o matiz em graus e a saturação e a luminosidade em porcentagem e leia o código hex 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. As duas notações 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, guarde o hex. Nada é enviado.