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

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.

A São relacionados, mas não idênticos. HSL usa um espaço de cone duplo onde a luminosidade vai do preto ao branco. Em L=50%, você obtém a forma mais pura do matiz. HSV usa um único cone onde o brilho escala do preto até a cor completa. Um amarelo puro fica em HSL(60, 100%, 50%) mas HSV(60, 100%, 100%). Este conversor segue o HSL. Se você trouxer valores dos controles HSV do Photoshop, ajuste saturação e luminosidade manualmente. Para CSS, HSL mapeia direto para a função moderna `hsl()`.

A Mito comum, mas não. Os dois descrevem exatamente a mesma cor — HSL(210, 50%, 40%) e seu gêmeo HEX #336699 são valores idênticos, só escritos de formas diferentes. A precisão depende da tela, não da notação. Para ajustes finos, porém, o HSL leva vantagem: mexer 5% na saturação é bem mais fácil do que chutar dígitos HEX. Explore em HSL e copie o HEX no final.

A Professores costumam usar nossa ferramenta para demonstrar como a saturação afeta o tom base de uma cor. Você pode projetar os códigos hexadecimais na tela para mostrar que zero porcento de luminosidade sempre resulta em preto puro.

A Equipes de marketing precisam de códigos exatos para posts e materiais impressos. Você define a cor da marca inserindo o HEX para extrair os valores HSL exatos para o manual de identidade. Designers podem subir a luminosidade em 15 por cento para criar um estado de hover aprovado. Compartilhe sempre esse trio HEX com sua agência.