AbraCalc

Conversor de Cor Hex para HSL

Converta um código de cor hex CSS para HSL (matiz, saturação, luminosidade) em um clique.

Por · Revisado por AbraCalc Methodology Review · 2 fontes

Incorporar esta ferramenta no seu site
Citar esta ferramenta

APA

AbraCalc. (2026). Conversor de Cor Hex para HSL [Online calculator]. Retrieved from https://abracalc.com/pt/hex-para-hsl/

BibTeX

@misc{abracalc-hex-para-hsl, author = {AbraCalc}, title = {Conversor de Cor Hex para HSL}, year = {2026}, howpublished = {\url{https://abracalc.com/pt/hex-para-hsl/}} }

Esta ferramenta respondeu à sua pergunta?

Como usar esta ferramenta

  1. Informe um código de cor hex de 6 dígitos (ex.: #ff5733). O # inicial é opcional.
  2. A ferramenta converte para HSL: matiz em graus, saturação e luminosidade como porcentagens.
  3. Copie a string hsl() para o seu CSS ou folha de estilos.

Cole um código de cor hex e obtenha o valor HSL equivalente para uso em funções CSS hsl() ou ferramentas de design.

Fórmula

Expand a 3-digit hex to 6 digits if needed (e.g. #abc → #aabbcc), then parse each pair: r = parseInt(hex[0..1], 16) / 255, similarly for g and b.

Then apply RGB-to-HSL: L = (max + min) / 2; S = d / (2 − max − min) if L > 0.5, else S = d / (max + min); hue from the dominant channel as in RGB-to-HSL.

Perguntas frequentes

Por que converter hex para HSL?
HSL é mais fácil de raciocinar ao ajustar brilho ou saturação. Você pode manter o matiz fixo e ajustar saturação/luminosidade para criar matizes e sombras.
Isso suporta hex de 3 dígitos?
Sim — #abc é tratado como #aabbcc.

Referências e fontes