# Conversor HEX para HSL Converter valores de cor HEX para HSL para exibição em tela > Página canônica: https://elysiatools.com/pt/tools/hex-to-hsl-converter - **Categoria:** Design - **Palavras-chave:** hex, hsl, cor, conversor, tela, web, hexadecimal, matiz, saturação, luminosidade ## Visão geral O Conversor HEX para HSL é uma ferramenta essencial para desenvolvedores e designers que precisam transformar códigos de cores hexadecimais em valores HSL (Matiz, Saturação e Luminosidade), facilitando a manipulação de cores em projetos web e interfaces digitais. ## Entradas - **Entrada HEX** (textarea): Enter HEX values, one per line: #ff0000 #00ff00 #ffffff #ff000080 #00ff0080 f00 0f0 00f f08 0f8 - **Formato de saída** (select) ## Quando usar - Ao ajustar a luminosidade ou saturação de uma cor de forma programática no CSS. - Quando você precisa converter paletas de cores legadas (HEX) para o padrão HSL, que é mais intuitivo para edições. - Ao trabalhar com animações ou estados de hover que exigem variações dinâmicas de tons de uma mesma cor base. ## Como funciona - Insira um ou mais códigos de cor no formato HEX (com ou sem #) na caixa de entrada. - Selecione o formato de saída desejado, como o padrão CSS, valores simples ou rotulados. - Clique no botão de conversão para processar instantaneamente a lista de cores. - Copie os resultados convertidos para utilizar diretamente no seu código ou folha de estilos. ## Casos de uso - Criação de sistemas de design com variações de tons baseados em uma cor primária. - Conversão rápida de bibliotecas de cores de sistemas legados para padrões modernos de CSS. - Ajuste fino de cores para garantir acessibilidade e contraste em interfaces web. ## Perguntas frequentes ### O que é o formato HSL? HSL significa Matiz (Hue), Saturação (Saturation) e Luminosidade (Lightness), um modelo de cor que descreve as cores de forma mais próxima à percepção humana. ### Posso converter várias cores de uma vez? Sim, você pode inserir uma lista de códigos HEX, um por linha, e o conversor processará todos simultaneamente. ### O conversor suporta cores com transparência (HEXA)? Sim, o conversor reconhece códigos HEX com 8 dígitos (incluindo o canal alfa) e gera o valor HSLA correspondente. ### Qual a vantagem de usar HSL em vez de HEX no CSS? O HSL permite alterar facilmente a luminosidade ou saturação de uma cor sem precisar recalcular o código hexadecimal completo. ### Os resultados são compatíveis com todos os navegadores? Sim, o formato HSL é amplamente suportado por todos os navegadores modernos e é o padrão recomendado para manipulação de cores no CSS. ## Ferramentas relacionadas - [Conversor Adobe RGB para CMYK](https://elysiatools.com/pt/tools/adobe-rgb-to-cmyk-converter): Converter valores de cor Adobe RGB para formato CMYK para impressão com suporte de canal alfa - [Conversor Adobe RGB para HEX](https://elysiatools.com/pt/tools/adobe-rgb-to-hex-converter): Converter valores de cor Adobe RGB para formato HEX para design web - [Conversor Adobe RGB para HSL](https://elysiatools.com/pt/tools/adobe-rgb-to-hsl-converter): Converter valores de cor Adobe RGB para formato HSL para trabalho de design - [Conversor Adobe RGB para HSV](https://elysiatools.com/pt/tools/adobe-rgb-to-hsv-converter): Converter valores de cor Adobe RGB para HSV/HSB para manipulação de cores - [Conversor Adobe RGB para LAB](https://elysiatools.com/pt/tools/adobe-rgb-to-lab-converter): Converter valores de cor Adobe RGB para o espaço de cor LAB para análise de cores com suporte de canal alfa - [Conversor Adobe RGB para LCH](https://elysiatools.com/pt/tools/adobe-rgb-to-lch-converter): Converter valores de cor Adobe RGB para o espaço de cor LCH para manipulação intuitiva de cores com suporte de canal alfa - [Conversor Adobe RGB para RGB](https://elysiatools.com/pt/tools/adobe-rgb-to-rgb-converter): Converter valores de cor Adobe RGB para formato sRGB para exibição web - [Conversor Adobe RGB para sRGB](https://elysiatools.com/pt/tools/adobe-rgb-to-srgb-converter): Converter valores de cor Adobe RGB para formato sRGB para exibição web ## Exemplos - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Amostras de Conversor Hex/Unicode](https://elysiatools.com/pt/samples/text-hex-unicode-formats): Amostras de teste para conversão de sequências de escape hex e unicode - [Exemplos de Processamento de Imagem Web Rust](https://elysiatools.com/pt/samples/web-image-processing-rust): Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagens Web TypeScript](https://elysiatools.com/pt/samples/web-image-processing-typescript): Exemplos de processamento de imagens Web TypeScript incluindo leitura/salvamento, redimensionamento e conversão de formato