Conversor HSL Grátis: Converter Cores HSL HEX RGB Online

A Hue (matiz, 0-360°), Saturation (0-100%), Lightness (0-100%).

A RGB define por canais. HSL por matiz/saturação/luminosidade, mais intuitivo.

A Mantenha H e S, mude L. L=90% claro, L=50% normal, L=10% escuro.

A Levar o controle de Luminosidade para 100% sempre resultará em branco, independentemente dos valores de Matiz ou Saturação que você selecionou. Isso porque a luminosidade máxima apaga completamente qualquer cor. Você verá o código HEX mudar para #FFFFFF e os valores RGB se tornarem 255, 255, 255. É uma maneira rápida de redefinir uma cor para seu estado mais brilhante.

A Monitores diferentes reproduzem cores de maneiras distintas. Um valor HSL vibrante no seu display calibrado pode parecer opaco em um notebook sem calibração. Isso não é problema da ferramenta — é uma diferença de hardware. Teste sua cor em pelo menos dois dispositivos antes de finalizar um design. Em projetos web, adicione fallbacks de HEX e RGB no CSS para reduzir discrepâncias.

A Não diretamente — esta ferramenta não tem botão de salvar ou função de exportação. Mas você pode fazer isso sozinho em dois segundos. Copie o código HEX que é atualizado ao vivo enquanto mexe nos controles e cole no seu software de design, num arquivo CSS ou num bloco de notas. Minha dica é manter um documento separado aberto para ir montando sua paleta enquanto testa combinações HSL.

A Este conversor HSL não lida com transparência alfa — ele gera apenas cores sólidas. Para adicionar opacidade, combine os valores HEX ou RGB obtidos com um canal alfa separado no CSS, como rgba(255, 100, 50, 0.7). A ferramenta foca em cores opacas, o que atende a maioria dos projetos de design sem problemas.

A Não diretamente neste conversor — ele não tem um verificador de contraste integrado. Mas tem um jeito: ajuste sua cor de fundo com os controles deslizantes, copie o código HEX, depois faça o mesmo para a cor do texto. Cole os dois valores HEX em uma calculadora de contraste WCAG gratuita online. Você precisa de pelo menos uma proporção de 4.5:1 para texto normal e 3:1 para texto grande. Sempre mantenho uma aba de verificação de contraste aberta quando escolho cores de marca.