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

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.

A Sim, mas a mistura fica por sua conta. Selecione a primeira cor com os controles deslizantes, copie o código HEX, depois ajuste a segunda cor. Para um gradiente CSS suave, mantenha os matizes a menos de 30 graus de diferença e varie a luminosidade em pelo menos 20%. Dica prática: regule ambas as saturações entre 50-70% para transições vibrantes. Cole os dois códigos HEX na propriedade de gradiente, ex.: 'background: linear-gradient(#HEX1, #HEX2)'.

A Esse intervalo não é arbitrário — está alinhado com o conceito original da roda de cores. O vermelho fica em 0°, o verde em 120° e o azul em 240°, então os 360° voltam perfeitamente para o vermelho. Sei que passar por cada grau individual parece exagero, mas oferece controle total. Para a maioria dos trabalhos de design, incrementos de 5 ou 10° são suficientes. Experimente segurar a tecla Shift enquanto arrasta o controle e ele vai saltar automaticamente nesses passos maiores.

A Existe, e é melhor que chutar. Abra a captura em qualquer editor de imagem com conta-gotas e amostre o pixel exato que deseja. Isso gera um valor RGB. Coloque esses três números nos campos RGB do nosso conversor e você verá na hora a decomposição HSL mais o HEX correspondente. Funciona muito bem para extrair cores de logotipos, fotos ou protótipos de UI. Dica: capture em 100% de zoom, senão você pega pixels com suavização que distorcem a cor.