Converta um código HEX em HSL
Introduza um código HEX e os valores HSL aparecem enquanto escreve: #3B82F6 corresponde a hsl(217.2, 91.2%, 59.8%). O resultado tem uma casa decimal, por isso, ao introduzi-lo de novo, obtém a mesma cor. O seletor dá a notação CSS ou os números 0–255 da caixa Cores do Office.
Como converter HEX em HSL?
Separe o código nos três canais RGB e divida cada um por 255. O canal mais alto e o mais baixo dão a luminosidade e a saturação, e o mais alto define o matiz[1].
Fórmula: L = (máx + mín) ÷ 2, S = (máx − L) ÷ mín(L, 1 − L), e H é um ângulo contado a partir do canal mais alto.
Tome #3B82F6. Os canais valem 59, 130 e 246. Divididos por 255, dão 0,231, 0,510 e 0,965. A média do canal mais alto e do mais baixo é 0,598, por isso a luminosidade é de 59,8%. A fórmula da saturação dá 91,2%.
O canal mais forte é o azul, por isso o cálculo do matiz começa em 240 graus. O vermelho é mais fraco do que o verde, subtraem-se 22,8 graus e o matiz fica em 217,2°. A cor completa escreve-se em CSS como hsl(217.2, 91.2%, 59.8%).
O conversor HEX para RGB faz o primeiro passo sozinho, e o conversor RGB para HSL parte diretamente de valores RGB.
O que é o modelo de cor HSL?
O HSL descreve uma cor com três valores. O matiz (em inglês hue) é um ângulo no círculo cromático, em que 0° é vermelho, 120° é verde e 240° é azul. A saturação indica a quantidade de cor: 0% dá um cinzento e 100% a cor plena. A luminosidade (lightness) vale 0% para o preto e 100% para o branco, e uma cor comum fica nos 50%[1].
A especificação CSS explica para que serve esta notação. Com números RGB é difícil adivinhar como obter uma versão mais clara da mesma cor, enquanto em HSL muda apenas um valor[1].
George Joblove e Donald Greenberg descreveram o modelo na edição de agosto de 1978 da revista Computer Graphics, a mesma em que Alvy Ray Smith descreveu o modelo HSV[2]. Chegou ao CSS com o CSS Color Module Level 3, que se tornou recomendação do W3C a 7 de junho de 2011[3].
Se tiver a cor noutra notação, como OKLCH, Lab ou código de Android, o conversor de cores mostra-a de uma vez em todas as notações.
Cores CSS com nome: código HEX e HSL
| Nome em CSS | Código HEX | HSL em CSS | HSL no Office (0–255) |
|---|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) | 170, 0, 0 |
| white | #FFFFFF | hsl(0, 0%, 100%) | 170, 0, 255 |
| red | #FF0000 | hsl(0, 100%, 50%) | 0, 255, 128 |
| lime | #00FF00 | hsl(120, 100%, 50%) | 85, 255, 128 |
| blue | #0000FF | hsl(240, 100%, 50%) | 170, 255, 128 |
| yellow | #FFFF00 | hsl(60, 100%, 50%) | 42, 255, 128 |
| aqua | #00FFFF | hsl(180, 100%, 50%) | 127, 255, 128 |
| fuchsia | #FF00FF | hsl(300, 100%, 50%) | 213, 255, 128 |
| silver | #C0C0C0 | hsl(0, 0%, 75.3%) | 170, 0, 192 |
| gray | #808080 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| maroon | #800000 | hsl(0, 100%, 25.1%) | 0, 255, 64 |
| olive | #808000 | hsl(60, 100%, 25.1%) | 42, 255, 64 |
| green | #008000 | hsl(120, 100%, 25.1%) | 85, 255, 64 |
| purple | #800080 | hsl(300, 100%, 25.1%) | 213, 255, 64 |
| teal | #008080 | hsl(180, 100%, 25.1%) | 127, 255, 64 |
| navy | #000080 | hsl(240, 100%, 25.1%) | 170, 255, 64 |
| orange | #FFA500 | hsl(38.8, 100%, 50%) | 27, 255, 128 |
| rebeccapurple | #663399 | hsl(270, 50%, 40%) | 191, 128, 102 |
Em que difere o HSL do HSB e da escala do Office?
| Código HEX | HSL em CSS | HSB | HSL no Office (0–255) |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | 217,2°; 76%; 96,5% | 154, 233, 153 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | 0°; 71,5%; 93,7% | 0, 215, 154 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | 142,1°; 82,7%; 77,3% | 100, 180, 116 |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | 37,7°; 95,5%; 96,1% | 26, 235, 128 |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | 258,3°; 62,6%; 96,5% | 183, 228, 169 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | 217,2°; 49,2%; 23,1% | 154, 83, 45 |
| #FAFAFA | hsl(0, 0%, 98%) | 0°; 0%; 98% | 170, 0, 250 |
| #333333 | hsl(0, 0%, 20%) | 0°; 0%; 20% | 170, 0, 51 |
Quantas casas decimais precisa o HSL?
| Código HEX | Resultado do conversor | Os mesmos valores arredondados | Cor dos valores arredondados |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | hsl(217, 91%, 60%) | #3C83F6 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | hsl(0, 84%, 60%) | #EF4343 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | hsl(142, 71%, 45%) | #21C45D |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | hsl(38, 92%, 50%) | #F59F0A |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | hsl(258, 90%, 66%) | #895AF6 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | hsl(217, 33%, 18%) | #1F2A3D |
style.color e lemo-la com getComputedStyle.Que formas de escrever o código HEX é que este conversor aceita?
| O que escreve | Resultado do conversor | Como lemos |
|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | Um código com cardinal, tal como está na folha de estilos |
| 3b82f6 | hsl(217.2, 91.2%, 59.8%) | O cardinal não é preciso, e as minúsculas lemo-las como maiúsculas |
| #38F | hsl(215, 100%, 60%) | A forma abreviada de três caracteres expandimo-la nós: #38F lemos como #3388FF |
| #3B82F680 | hsla(217.2, 91.2%, 59.8%, 0.5) | Os dois últimos caracteres são a opacidade: levamo-la connosco e damos o resultado em hsla |
| color: #3B82F6; | hsl(217.2, 91.2%, 59.8%) | Cole a linha inteira da folha de estilos ou das ferramentas do navegador, o código tiramo-lo nós |
| "#3B82F6" | hsl(217.2, 91.2%, 59.8%) | As aspas de um ficheiro JSON ou de JavaScript são ignoradas e lemos apenas o código |
| ##3B82F6 | hsl(217.2, 91.2%, 59.8%) | O cardinal duplicado que aparece ao colar junto de um já escrito não estraga nada |
| #EF4444 | 0, 215, 154 | Com o seletor Notação em Microsoft Office o resultado sai na escala 0–255, a da janela Cores do Word e do Excel |
Onde vai usar o resultado HSL?
As folhas de estilos e os navegadores trabalham com a notação CSS, e os programas do Office com a escala 0–255, por isso escolha a notação certa no seletor antes de copiar o resultado.
Folha de estilos CSS
Cole o resultado como valor de uma propriedade, por exemplocolor: hsl(217.2, 91.2%, 59.8%);. O CSS também aceita a forma com espaços e a opacidade depois de uma barra:hsl(217.2 91.2% 59.8% / 50%)[1].Figma
Selecione a camada e clique na amostra do preenchimento na barra lateral direita. Abaixo dos controlos de matiz e opacidade, abra a lista de modelos de cor e escolha HSL[4].PowerPoint, Word e Excel
Selecione uma forma, abra Preenchimento da Forma e escolha Mais Cores de Preenchimento[6]. No separador Personalizado, mude o modelo de cor para HSL e escreva os três números do Office nas caixas Matiz, Sat e Lum.Chrome
Clique com o botão direito no elemento e escolha Inspecionar. No painel de estilos, mantenha premida a tecla Shift, clique na amostra de cor e escolhahsl(X X X / X)na lista que se abre[7]. O valor no painel passa então a HSL.
Converter outras unidades para HSL
Converter HEX para outras unidades
Fontes
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- HSL e HSV — Wikipédia
- CSS Color Module Level 3 — HSL color values — W3C
- Update fills using the color picker — Figma Help Center
- Escolher cores na caixa de diálogo Cores — Suporte da Microsoft
- Adicionar um preenchimento ou efeito a uma forma ou caixa de texto — Suporte da Microsoft
- Inspecionar e depurar cores em alta definição e não HD com o seletor de cores — Chrome for Developers
Todos os valores das tabelas foram calculados a partir das definições das unidades e verificados aritmeticamente antes da publicação. Os dados históricos e os nomes das unidades locais assentam nas fontes indicadas acima.
Última revisão do conteúdo: · escrito e verificado pela equipa Arteon
Perguntas frequentes sobre converter HEX em HSL
Que notação HSL devo escolher no conversor?
Escolha CSS para folhas de estilos e para as ferramentas de programador do navegador. Escolha Microsoft Office (0–255) quando copiar a cor para a caixa Cores do Word, do Excel ou do PowerPoint, porque aí cada um dos três valores vai de 0 a 255[5].
Porque é que uma cor introduzida no Office volta com outro código HEX?
A caixa Cores calcula o HSL em números inteiros numa escala de 0 a 255, e nesse cálculo perde-se alguma precisão. Verificámos isto no Office 2016: #3B82F6 aparece como 154, 233 e 153, e esses três números introduzidos de novo dão #3C83F6. O conversor usa o mesmo algoritmo, por isso mostra-lhe exatamente a cor que vai ver no programa. Para introduzir números lidos na caixa, use o conversor HSL para HEX com a notação do Office.
Como escrevo uma cor HSL com transparência?
Introduza um código de oito caracteres, por exemplo #3B82F680. O conversor dá então hsla(217.2, 91.2%, 59.8%, 0.5), em que o quarto número é a opacidade de 0 a 1[1]. A notação do Office dá apenas os três números de matiz, saturação e luminosidade.
Porque é que o amarelo e o azul têm a mesma luminosidade em HSL?
A luminosidade do HSL é a média do canal mais forte e do mais fraco, por isso não corresponde à claridade que o olho percebe. A especificação CSS usa exatamente este exemplo: hsl(60 100% 50%) e hsl(240 100% 50%) têm ambos 50%, mas o amarelo parece muito mais claro[1].
Como obtenho um tom mais claro de uma cor em HSL?
Mantenha o matiz e a saturação e aumente apenas a luminosidade. hsl(217.2, 91.2%, 59.8%) com luminosidade de 70% dá #6DA2F8. Uma escala de luminosidade pronta e a conversão de qualquer valor HSL em código estão no conversor HSL para HEX.
Uma cor em HSL tem o mesmo contraste que em HEX?
Sim, porque as duas notações descrevem a mesma cor e o contraste depende da cor. Cole o resultado no verificador de contraste de cores, que aceita HSL tal como aceita um código HEX.
Ajude-nos a melhorar as nossas ferramentas
Tem uma ideia, encontrou um erro ou quer sugerir uma nova ferramenta? Escreva-nos.