Conversor de HEX para HSL
Converta HEX para HSL em tempo real enquanto digita — grátis, instantâneo, com exemplo prático e tabela de cores comuns.
Digite um valor HEX para ver o valor HSL correspondente logo abaixo, ou escolha uma cor no seletor.
Exemplo prático
HEX #ff5733 = HSL 11, 100%, 60%
Como funciona a conversão
- Um código HEX representa os mesmos três canais RGB escritos em base 16: dois dígitos por canal, variando de 00 (0) a ff (255).
- O HSL descreve a mesma cor por meio de matiz (hue, de 0 a 360° no círculo cromático), saturação e luminosidade — ideal para escurecer ou dessaturar uma cor alterando apenas um componente.
Cores comuns em HEX e HSL
| Cor | HEX | HSL |
|---|---|---|
| Vermelho | #ff0000 | 0, 100%, 50% |
| Laranja | #ffa500 | 39, 100%, 50% |
| Amarelo | #ffff00 | 60, 100%, 50% |
| Verde | #008000 | 120, 100%, 25% |
| Ciano | #00ffff | 180, 100%, 50% |
| Azul | #0000ff | 240, 100%, 50% |
| Roxo | #800080 | 300, 100%, 25% |
| Rosa | #ffc0cb | 350, 100%, 88% |
| Marrom | #a52a2a | 0, 59%, 41% |
| Branco | #ffffff | 0, 0%, 100% |
| Cinza | #808080 | 0, 0%, 50% |
| Preto | #000000 | 0, 0%, 0% |
Cada conversão roda no seu navegador. Nada do que você digita é enviado para o BroBroGo.
Perguntas frequentes
Como converter HEX para HSL?
Digite ou cole seu valor HEX acima — o valor HSL é atualizado instantaneamente enquanto você digita. Você também pode escolher a cor visualmente usando o seletor de cores.
A conversão é exata?
Os valores são arredondados para números inteiros, que é o formato esperado pelo CSS e por ferramentas de design. A diferença fica muito abaixo do que o olho humano consegue perceber.