Converter HSL para HEX
Defina matiz, saturação e luminosidade e obtenha o código de cor HEX de seis dígitos correspondente, pronto para copiar.
Entrada hsl
Resultado · HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
Como usar: HSL para HEX
- 1
Insira uma cor
Digite um código de cor ou escolha uma cor com o seletor: cada campo aceita o formato que exibe.
- 2
Veja a conversão
O resultado é atualizado instantaneamente enquanto você digita, junto com uma pré-visualização da cor em tempo real.
- 3
Copie o código
Copie o valor de que precisa com um clique e cole-o no seu design, no seu CSS ou nas configurações de impressão.
Por que converter HSL para HEX
O HSL é a forma mais intuitiva de montar um sistema de cores. Você fixa um matiz, digamos 262° para o violeta, e cria uma escala inteira mudando principalmente a luminosidade: em torno de 95% para fundos, 58% para botões e destaques, 30% para textos. Designers e desenvolvedores usam esse método para tons claros, tons escuros e temas escuros.
A escala pronta, porém, geralmente precisa ser entregue como códigos HEX: guias de estilo, design tokens, bibliotecas do Figma, manuais de marca e muitos sistemas de gerenciamento de conteúdo esperam valores #RRGGBB. Digite os valores HSL e copie o resultado HEX — hsl(262, 83%, 58%), por exemplo, vira #7C3BED. A ferramenta também mostra RGB, HSV e CMYK da mesma cor. Como o HEX só guarda 256 níveis por canal, mudanças muito pequenas no HSL nem sempre alteram o código HEX.
Tudo funciona localmente no seu navegador: suas imagens nunca são enviadas para um servidor.