Skip to content

Conversor de HEX para HSL

Converta qualquer cor hex para HSL no seu navegador — hex de 3, 6 e 8 dígitos com alfa, todos suportados. Grátis, instantâneo, sem cadastro, suas cores nunca saem da página.

Sem rastreamento Roda no navegador Grátis
Toda conversão de cor acontece localmente no seu navegador. Nenhum dado é enviado para qualquer servidor.
Gama: sRGB Display P3 Rec2020
Contraste contra: —
AA AA-Lg AAA AAA-Lg · APCA Lc —
Simulação de daltonismo (8 tipos)
Protanopia (cego para vermelho) —
Deuteranopia (cego para verde) —
Tritanopia (cego para azul) —
Acromatopsia (total) —
Protanomalia (deficiência de vermelho) —
Deuteranomalia (deficiência de verde) —
Tritanomalia (deficiência de azul) —
Acromatomalia (parcial) —
Tints / Shades / Tones / Harmonies

Tints

Shades

Tones

Harmonies

Copiar como código
—
—
—
—
—
Referência de cores comuns
Revisado para conformidade com CSS Color 4 §6.4, suporte às formas de hex de 3/4/6/8 dígitos, correção de decodificação do par alfa e estabilidade de round-trip entre HEX e HSL pelas faixas de matiz 0-360° e S/L 0-100%. — Go Tools Engineering Team · May 27, 2026

O que é um Conversor de HEX para HSL?

Um conversor de hex para HSL é um pequeno utilitário que transforma um código de cor hex (`#3b82f6`) na tripla cilíndrica Matiz / Saturação / Luminosidade que codifica a mesma cor sRGB (`hsl(217 91% 60%)`). Códigos hex são a string concisa em base 16 que designers e desenvolvedores colam entre Figma, Sketch, Photoshop, PDFs de guia de marca e folhas de estilo CSS — três canais de 8 bits empacotados em uma forma `#RRGGBB` de 6 caracteres, ancorada no espaço de cor sRGB definido pela IEC 61966-2-1 em 1996. HSL é uma reformulação cilíndrica desse mesmo espaço de cor em três eixos mais amigáveis para designer: um ângulo de matiz na roda de cores, uma porcentagem de saturação cromática e uma porcentagem de luminosidade. Desenvolvedores convertem HEX → HSL o tempo todo: para definir uma cor de marca como variável CSS e depois compor matizes claras ou escuras ajustando apenas L, para alimentar uma UI de seletor de cor que exibe Matiz e SL como controles separados, para gerar rampas de matizes claras e escuras para um design system ou para fazer matemática de variável CSS em tempo de execução via `hsl(from var(--primary) h s calc(l + 10%))` para tokens derivados de tema. Esta ferramenta roda a conversão ao vivo enquanto você digita, sem botão "Converter" para clicar, e expõe todo outro formato de cor comum (RGB, OKLCH, OKLAB, HSV, HWB, CMYK, mais as 148 cores nomeadas do CSS) ao lado da saída HSL, grátis.

**O próprio formato HSL merece um olhar mais próximo.** HSL = Matiz (0-360°), Saturação (0-100%), Luminosidade (0-100%). Matiz é posição angular na roda de cores — 0° é vermelho, 60° é amarelo, 120° é verde, 180° é ciano, 240° é azul, 300° é magenta e 360° volta para vermelho. Saturação é intensidade cromática de 0% (cinza acromático) a 100% (totalmente cromático sem conteúdo de cinza). Luminosidade é brilho de 0% (preto puro, independente do matiz ou saturação) passando por 50% (a matiz pura em chroma cheio) até 100% (branco puro, independente do matiz ou saturação). Alvy Ray Smith publicou a derivação original em 1978 como parte do empurrão inicial da computação gráfica para dar a designers sistemas de coordenadas mais próximos do seu modelo cognitivo de cor do que o endereçamento bruto de canais RGB. O modelo está no CSS desde o CSS3 (2010) e vem em todo navegador até o IE 9. A sintaxe CSS original usava vírgulas: `hsl(217, 91%, 60%)` para opaco, `hsla(217, 91%, 60%, 0.5)` para com alfa. O CSS Color 4 (Candidate Recommendation do W3C desde 2022) adicionou uma forma moderna separada por espaços: `hsl(217 91% 60%)` e `hsl(217 91% 60% / 0.5)` com alfa prefixado por barra — mesma forma de sintaxe das outras notações funcionais do CSS Color 4 (`rgb()`, `lab()`, `oklch()`, `color()`). Matiz também pode ser expresso em turns (`hsl(0.6turn 91% 60%)`) ou radianos (`hsl(3.787rad 91% 60%)`), tudo equivalente à forma canônica em graus. Todo navegador evergreen interpreta toda variação sintática; a ferramenta emite a forma moderna separada por espaços por padrão.

A matemática da conversão vai nos dois sentidos de forma limpa. **HEX → HSL** é um pipeline de dois passos. Primeiro, interprete o hex de 6 dígitos `#RRGGBB` como três números base 16 de 2 dígitos via `parseInt(hex.slice(1, 3), 16)` etc. para obter canais RGB inteiros em 0-255. Segundo, normalize cada canal para 0-1 dividindo por 255, depois compute `max = Math.max(r, g, b)`, `min = Math.min(r, g, b)`, `delta = max - min`. Luminosidade é a média de max e min: `L = (max + min) / 2`. Saturação é condicional na luminosidade: quando L ≤ 0,5, `S = delta / (max + min)`; quando L > 0,5, `S = delta / (2 - max - min)`. De forma equivalente na forma do CSS Color 4 §6.4, `S = delta / (1 - |2L - 1|)` (com S = 0 quando delta = 0). Matiz é por trechos sobre qual canal é o máximo: quando R é o máximo, `H = ((G - B) / delta) % 6`; quando G é o máximo, `H = (B - R) / delta + 2`; quando B é o máximo, `H = (R - G) / delta + 4`; multiplique por 60 para escalar para graus, some 360 se negativo. O inverso (HSL → HEX, via RGB) usa o auxiliar `f(n) = L - a * max(-1, min(k-3, 9-k, 1))` onde `a = S * min(L, 1-L)` e `k = (n + H/30) mod 12`, aplicado com n = 0, 8, 4 para produzir R, G, B respectivamente, depois escalado para 0-255 e codificado em hex.

**Por que o HSL ainda é útil.** Sliders intuitivos — ajustar L previsivelmente clareia ou escurece sem quebrar a identidade do matiz, enquanto ajustar um canal RGB produz um deslocamento de cor menos previsível. Matemática CSS em tempo de execução — navegadores modernos suportam `hsl(from var(--primary) h s calc(l + 10%))` para derivar tokens de tema em tempo de renderização. Cognição de designer — designers criados em seletores de cor HSV raciocinam sobre cor em termos de matiz + chroma mesmo quando o arquivo entrega hex. **O problema do HSL** é que seu eixo de Luminosidade não é perceptualmente uniforme — um verde em L=50% parece visivelmente mais brilhante do que um azul em L=50% porque o HSL herda as peculiaridades de gama do sRGB e trata todo matiz como equivalente na escala L. Quando você precisa de uniformidade perceptual (geração de paleta onde cada passo deve parecer igualmente brilhante, cálculo de token de modo escuro que não torne acidentalmente texto azul mais difícil de ler do que texto verde), vá para o OKLCH — a mesma ferramenta expõe os dois, então a escolha fica a um olhar de distância.

O fluxo HEX → HSL desta ferramenta é uma direção de uma família de 5 spokes que compartilham o mesmo conversor de cor unificado por baixo. O conversor de cores unificado dedicado é o hub — ele mostra todos os 9 formatos simultaneamente editáveis e é a ferramenta certa quando seu fluxo precisa de mais do que apenas hex e HSL. Os spokes de direção única miram intenções específicas de busca no Google: o conversor de hex para RGB para a direção de canvas-e-hardware, o conversor de RGB para hex para o inverso, o conversor de hex para OKLCH para design systems perceptualmente uniformes modernos (Tailwind v4 e shadcn agora padronizam OKLCH) e o conversor de hex para CMYK para aproximações de preparação de impressão. Todos os cinco spokes e o hub compartilham o mesmo motor de parsing e a mesma matemática de conversão, então os resultados são garantidamente idênticos pela família toda. Cada conversão roda localmente no seu navegador — seus códigos hex nunca são enviados, nunca registrados, e zero requisições de rede disparam enquanto você digita. Confira no DevTools.

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

Principais Recursos

Todas as Cinco Formas de Hex Interpretadas de Forma Idêntica

3 dígitos `#F73`, alfa de 4 dígitos `#F738`, 6 dígitos `#3b82f6`, alfa de 8 dígitos `#FF573380`, mais a variante sem `#` para cada uma. O parser normaliza todas para a mesma cor interna antes de derivar o HSL, então você pode colar qualquer forma que sua fonte use sem expandir manualmente a forma abreviada antes. A capitalização também é normalizada — `#3b82f6` e `#3B82F6` produzem saída HSL idêntica.

Saída HSL na Sintaxe Moderna Separada por Espaços

O campo HSL expõe o valor na forma moderna do CSS Color 4: `hsl(217 91% 60%)` para cores opacas, `hsl(217 91% 60% / 0.5)` para as com alfa. Ambas as formas funcionam em todo navegador evergreen (Chrome 65+, Safari 13+, Firefox 52+). A forma legada com vírgulas `hsl(217, 91%, 60%)` está a um replace mecânico de distância se seu alvo precisa dela; a sintaxe moderna é preferida em código novo porque alinha com as outras sintaxes funcionais do CSS Color 4.

OKLCH como Fonte-de-Verdade, Não Pivô em HSL

Mesmo que este spoke mire em HEX → HSL especificamente, o conversor compartilhado por baixo mantém a cor canônica como uma tripla OKLCH internamente. Isso significa que round-trips HEX → HSL → RGB → OKLAB → HEX acontecem sem deriva de float por passo; conversores legados que roteiam por HSL como pivô acumulam erro de arredondamento e podem desviar o matiz em vários graus ao longo de algumas conversões. O pivô em OKLCH mantém todo outro formato matematicamente ancorado no mesmo ponto-fonte.

Canal Alfa Decodificado de Forma Limpa

Hex de 8 dígitos e 4 dígitos com alfa (`#RRGGBBAA` e `#RGBA`) são interpretados corretamente. O par final mapeia para um float alfa 0-1: `00` → 0, `80` → 0,502, `FF` → 1. A saída usa a sintaxe de barra do CSS Color 4 (`hsl(217 91% 60% / 0.5)`) por padrão; a forma legada `hsla(217, 91%, 60%, 0.5)` está a um replace de distância. Útil para migração de design tokens onde valores alfa podem ter ficado enterrados em códigos hex de 8 dígitos.

Oito Outros Formatos Visíveis Simultaneamente

O mesmo hex que você cola também alimenta RGB, HSV, HWB, OKLCH, OKLAB, CMYK e a cor nomeada CSS mais próxima — todos visíveis de relance na mesma página. Você nunca fica trancado em hex → HSL apenas. Se um colega de equipe precisar da tripla OKLCH para um token Tailwind v4 (onde a uniformidade perceptual importa mais do que o L de gama embaralhada do HSL), da cor nomeada mais próxima para prosa de documentação ou da tupla RGB para uma chamada de canvas, os valores já estão lá com seus próprios botões Copiar.

Contraste WCAG + APCA Embutido

Passe um hex e a linha de contraste imediatamente o pontua contra branco e preto usando WCAG 2.1 (piso regulatório: 4,5:1 para corpo de texto, 7:1 para AAA) e APCA Lc (sucessor proposto do WCAG 3: alvo `|Lc| ≥ 75` para corpo de texto). Útil quando você acaba de converter um hex de marca para HSL e quer verificar se a cor resultante (ou uma variante com luminosidade ajustada) é realmente legível como cor de corpo de texto antes de embarcar.

Copiar como CSS / Tailwind v4 / SwiftUI / Compose / Flutter

Abaixo do seletor, a seção Copiar como código transforma a cor atual em snippets prontos para colar em cinco plataformas: propriedade customizada CSS (`--color-brand: hsl(217 91% 60%)`), token `@theme` do Tailwind v4, literal `Color(hue:saturation:brightness:)` do SwiftUI, constante `Color.hsl(217f, 0.91f, 0.60f)` do Jetpack Compose, `HSLColor.fromAHSL(...)` do Flutter. A sintaxe exata que cada plataforma espera, pronta para jogar em um asset catalog iOS, arquivo de tema Android ou `ThemeData` do Flutter.

100% No Navegador — Sem Upload, Sem Rastreamento

Todo parsing de hex, conversão de HSL, pontuação de contraste e geração de paleta roda localmente no seu navegador. Seus códigos hex nunca são transmitidos, nunca registrados em servidor, nunca analisados. Zero requisições de rede enquanto você digita — confira no DevTools. Seguro para paletas de marca não anunciadas, design tokens internos, mockups em rascunho sob NDA e qualquer outro trabalho de cor confidencial.

Hash de URL Compartilhável para a Cor Exata

A cor atual codifica para o hash da URL como `#hex=3b82f6` automaticamente a cada mudança. Copie a URL, cole em uma thread do Slack ou uma issue do GitHub, e qualquer um que abrir cai no mesmo hex com a mesma tripla HSL. O hash vive apenas na sua barra de endereço e nunca é transmitido ao servidor (navegadores não incluem fragmentos de URL em requisições HTTP), então mesmo compartilhar o link não vaza a cor para terceiros.

Alternativas ao Conversor de HEX para HSL

RapidTables Hex to HSL

ferramenta de navegador

O resultado padrão do Google para "hex to hsl" — um formulário de mão única com hex entrando, HSL saindo, sem outros formatos visíveis. Útil para consultas pontuais vindas de busca. Não tem OKLCH, verificação de contraste, detecção de gama, tratamento de alfa e a visão simultânea de múltiplos formatos. Esta ferramenta vence em todo eixo, exceto no caso minimalista de conversão única.

ColorHexa

ferramenta de navegador

Páginas SEO de longa data por cor com metadados profundos: conversões, paletas, harmonias, gradientes para qualquer hex consultado. UI datada (começo dos anos 2010), sem suporte a OKLCH, sem contraste APCA, sem tratamento de gama ampla. Forte para descoberta SEO de um hex específico via Google; mais fraco para fluxos ativos de conversão onde digitar em uma UX de campos unificados é mais rápido.

Calculadora HSL da W3Schools

ferramenta de navegador

Toggle HEX/RGB/HSL amigável para iniciantes em uma página focada em ensino, onipresente em resultados de busca. Sem OKLCH, sem tratamento de alfa além de hsla, sem recursos avançados. Útil como referência ao lado do conteúdo explicativo da W3Schools. Esta ferramenta vence em todo outro eixo: mais formatos, matemática perceptual, recursos de gama + contraste + CVD, exportação moderna de código para Tailwind v4 / SwiftUI / Compose / Flutter.

Color Picker do DevTools do Navegador

recurso embutido do navegador

Chrome, Firefox e Safari DevTools todos vêm com um color picker que alterna entre HEX, RGB e HSL inline quando você clica em uma amostra de cor no painel CSS. Grátis, sem instalação, sempre disponível. Não tem OKLCH, não tem URLs compartilháveis, não tem exportação de código para plataformas não-web (SwiftUI, Compose). Vá para o DevTools quando já estiver depurando CSS; vá para esta ferramenta quando precisar de saída cross-platform.

HSL Color Picker by Mothereff

ferramenta de navegador

Um seletor HSL focado com sliders ao vivo de matiz/saturação/luminosidade e uma saída hex. UI minimalista, bom para exploração rápida em HSL. Não tem OKLCH e a grade mais ampla de formatos; sem recursos de contraste ou gama. Útil como ferramenta focada apenas em HSL; esta ferramenta cobre o mesmo fluxo mais 8 outras visões de formato e as verificações perceptuais.

ConvertingColors

ferramenta de navegador

Páginas SEO por cor cobrindo muitos espaços (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Não tem suporte moderno a OKLCH e a UX de edição em campos unificados. Páginas de conteúdo auto-geradas parecem fazenda de conteúdo, mas os dados de conversão estão corretos. Bom para garimpar metadados de cor individuais via Google; esta ferramenta é mais rápida para fluxos ativos.

Exemplos de HEX para HSL

Definição de variável CSS para uma cor de marca

#3b82f6

Saída HSL: `hsl(217 91% 60%)`. O fluxo canônico para um design system construído em HSL: defina a marca como `--primary: hsl(217 91% 60%)` uma vez, depois componha tons mais claros ajustando apenas a porcentagem de L — `hsl(217 91% 70%)` para um tom de hover, `hsl(217 91% 80%)` para um estado desabilitado, `hsl(217 91% 90%)` para um preenchimento de fundo sutil. Matiz e saturação ficam travados, então a família lê como uma rampa coerente. Folhas de estilo baseadas em RGB precisam de três edições coordenadas de canal por passo; o HSL precisa de uma.

Designer traduzindo cor do Figma para seletor HSL

#FF5733

Saída HSL: `hsl(11 100% 60%)`. Designers raciocinando sobre cor em termos de matiz + saturação + luminosidade (o modelo cognitivo que Munsell formalizou em 1905) frequentemente querem a tripla HSL mesmo quando o arquivo fonte-de-verdade entrega hex. Matiz = 11° posiciona isso no lado vermelho da cunha de laranja; saturação = 100% significa que o canal está totalmente cromático; luminosidade = 60% fica um nó acima do ponto médio. Colar o hex do Figma uma vez produz o HSL correspondente, pronto para entrar no seletor mental do designer sem um chute manual na roda de cores.

Varredura rápida de luminosidade para uma paleta

#3b82f6

Saída HSL: `hsl(217 91% 60%)`. Com a tripla HSL em mãos, gerar uma rampa de tons claros é uma varredura unidimensional: pivote L para 70% para `hsl(217 91% 70%)`, 80% para `hsl(217 91% 80%)`, 90% para `hsl(217 91% 90%)` para subir em direção ao branco; baixe para 50%, 40%, 30% para matizes escuras. A rampa inteira de 9 passos emerge mudando um número. Matizes claras e escuras ficam tonalmente relacionadas porque matiz e saturação ficam constantes — o truque que design systems legados usavam antes do OKLCH baratear rampas perceptualmente uniformes.

Hex de 8 dígitos com alfa → hsla()

#FF573380

Saída HSL: `hsl(11 100% 60% / 0.5)`. O par final (`80`) decodifica como `128/255 ≈ 0,502`, exposto como canal alfa via a sintaxe de barra do CSS Color 4. A forma legada equivalente é `hsla(11, 100%, 60%, 0.5)`, que tem suporte em todo navegador desde o IE 9 e é o que pré-processadores mais antigos esperam. Hex de 8 dígitos com alfa chegou nativamente em navegadores evergreen em 2018; antes disso, o alfa precisava vir explicitamente pela função `hsla()`.

Conversões Comuns de HEX → HSL

Tabela de referência dos 10 códigos hex mais convertidos e seus equivalentes HSL — primárias puras, secundárias puras e duas cores de marca do mundo real da paleta Tailwind.

Preto

#000000 → hsl(0 0% 0%)

Preto puro. Luminosidade em 0% — a ausência de luz emitida. Matiz e saturação são convencionalmente 0 para cinzas.

#000000 → hsl(0 0% 0%)

Preto puro em tela raramente é a escolha de design certa — experimente `hsl(0 0% 7%)` ou OKLCH com luminosidade 0,1-0,15 para corpo de texto mais suave.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Branco

#FFFFFF → hsl(0 0% 100%)

Branco puro. Luminosidade em 100% — a cor sRGB mais brilhante possível. Matiz e saturação são convencionalmente 0 para cinzas.

#FFFFFF → hsl(0 0% 100%)

Fundos brancos puros podem produzir cansaço visual em ambientes escuros — experimente `hsl(0 0% 98%)` ou OKLCH 0,98 para alternativas mais quentes.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Vermelho

#FF0000 → hsl(0 100% 50%)

Vermelho puro. Matiz em 0° (a posição inicial da roda), saturação totalmente cromática, luminosidade no ponto médio onde matizes puras vivem.

#FF0000 → hsl(0 100% 50%)

Vermelho puro é altamente saturado e raramente cabe em uma paleta de marca — a maioria das cores de marca "vermelhas" fica mais perto de `hsl(0 73% 50%)` (#DC2626).

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Verde

#00FF00 → hsl(120 100% 50%)

Verde puro. Matiz em 120° (um terço do caminho ao redor da roda), saturação totalmente cromática, luminosidade em 50%. Cor nomeada CSS `lime`.

#00FF00 → hsl(120 100% 50%)

A palavra-chave CSS `green` resolve para #008000 (hsl(120 100% 25%)), não #00FF00 — uma fonte frequente de confusão. Use `lime` para o puro hsl(120 100% 50%).

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Azul

#0000FF → hsl(240 100% 50%)

Azul puro. Matiz em 240° (dois terços do caminho ao redor da roda), saturação totalmente cromática, luminosidade no ponto médio.

#0000FF → hsl(240 100% 50%)

Azul puro sobre fundo branco falha no contraste WCAG AA (3,7:1) — considere `hsl(224 76% 48%)` (Tailwind blue-700) para corpo de texto.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Ciano

#00FFFF → hsl(180 100% 50%)

Ciano. Matiz em 180° (o ponto médio da roda, oposto ao vermelho), saturação totalmente cromática, luminosidade no ponto médio da matiz pura. Cor nomeada CSS `cyan` ou `aqua`.

#00FFFF → hsl(180 100% 50%)

Ciano fica oposto ao vermelho na roda (180°/0°), tornando-o o parceiro natural de harmonia complementar para qualquer cor de marca da família do vermelho.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Magenta

#FF00FF → hsl(300 100% 50%)

Magenta. Matiz em 300° (cinco sextos ao redor da roda), saturação totalmente cromática, luminosidade no ponto médio da matiz pura. Cor nomeada CSS `magenta` ou `fuchsia`.

#FF00FF → hsl(300 100% 50%)

Magenta fica oposto ao verde na roda (300°/120°), tornando-o o parceiro natural de harmonia complementar para qualquer cor de marca da família do verde.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Amarelo

#FFFF00 → hsl(60 100% 50%)

Amarelo. Matiz em 60° (um sexto ao redor da roda, entre vermelho e verde), saturação totalmente cromática, luminosidade no ponto médio da matiz pura.

#FFFF00 → hsl(60 100% 50%)

Amarelo em hsl(60 100% 50%) parece muito mais brilhante do que vermelho em hsl(0 100% 50%) — um exemplo vivo da não uniformidade perceptual do HSL. O OKLCH normaliza isso.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Tailwind blue-500

#3b82f6 → hsl(217 91% 60%)

A cor de marca blue-500 padrão do Tailwind CSS — o "azul web" canônico de meados dos anos 2020. Usado em incontáveis dashboards, sites de marketing e ferramentas administrativas.

#3b82f6 → hsl(217 91% 60%)

O Tailwind v4 redefine blue-500 em OKLCH (`oklch(0.629 0.193 263.4)`) para rampas perceptualmente uniformes — o HSL é o fallback do v3.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Tailwind rose-500

#f43f5e → hsl(350 89% 60%)

O rose-500 padrão do Tailwind CSS — um rosa-avermelhado de alta saturação usado comumente para botões de destaque, estados de alerta e contraste de marca.

#f43f5e → hsl(350 89% 60%)

A matiz do rose-500 (350°) fica logo antes do vermelho (0°/360°) na roda — uma leve mudança para rosa que lê como mais quente do que vermelho puro.

Precisa de saída perceptualmente uniforme em vez disso? Experimente o conversor de hex para OKLCH dedicado — cada passo de L parece igualmente brilhante entre matizes, diferente do HSL.

Como Usar o Conversor de HEX para HSL

  1. 1

    Cole um código hex no campo HEX

    Jogue qualquer valor hex na entrada HEX — com ou sem o `#` na frente, na forma abreviada de 3 dígitos (`#F73`), forma cheia de 6 dígitos (`#3b82f6`), forma abreviada alfa de 4 dígitos (`#F738`) ou forma cheia alfa de 8 dígitos (`#FF573380`). A ferramenta normaliza todas as cinco formas de entrada para a mesma cor canônica internamente. A capitalização não importa (`#3b82f6` e `#3B82F6` interpretam de forma idêntica). Caracteres inválidos ou contagem errada de dígitos produzem um erro discreto inline; hex válido atualiza todo outro campo de formato em tempo real, incluindo o HSL.

  2. 2

    Leia a tripla HSL do campo HSL

    O campo HSL abaixo do campo HEX mostra o valor `hsl()` correspondente na sintaxe moderna separada por espaços do CSS Color 4: `hsl(217 91% 60%)` para uma cor opaca, `hsl(217 91% 60% / 0.5)` para uma com alfa. Matiz é um grau inteiro de 0 a 360; saturação e luminosidade são porcentagens inteiras de 0 a 100. Os valores são arredondados para legibilidade na exibição — a fonte-de-verdade interna em OKLCH da ferramenta significa que a precisão subjacente é float, então round-trips de volta para hex ficam estáveis.

  3. 3

    Clique em Copiar para pegar a string HSL

    Cada card de formato tem um botão Copiar à direita. Um clique e o valor cai na sua área de transferência — o rótulo do botão brevemente pisca "Copiado!" para você saber. A string copiada é a sintaxe canônica do CSS Color 4 (`hsl(217 91% 60%)`); se seu alvo precisa da forma legada com vírgulas (`hsl(217, 91%, 60%)`), a conversão é mecânica. Para saída específica de plataforma (Tailwind v4, SwiftUI, Compose, Flutter), use a seção Copiar como código abaixo do seletor — esses snippets emitem o formato que cada plataforma espera nativamente.

  4. 4

    Também visíveis: RGB, OKLCH, OKLAB, HSV, HWB, CMYK, cor nomeada

    O mesmo hex que você cola também acende os outros campos de formato — RGB para chamadas de canvas e hardware, OKLCH e OKLAB para design systems perceptualmente uniformes, HSV e HWB para fluxos de seletor de cor de designer, CMYK para estimativas de impressão e a cor nomeada CSS mais próxima para prosa de documentação. Você nunca fica trancado em hex → HSL apenas. Se você também precisar da tripla OKLCH para um bloco `@theme` do Tailwind v4 (onde a luminosidade perceptual importa mais do que o L de gama embaralhada do HSL), ela está bem ali no campo OKLCH com seu próprio botão Copiar.

  5. 5

    Use o seletor para varrer a luminosidade visualmente

    Abaixo da grade de formatos há um quadrado SL + controle deslizante de matiz + controle deslizante de alfa para exploração visual. O quadrado SL mapeia diretamente para o plano Saturação × Luminosidade do HSL: arraste verticalmente para caminhar L de 0% a 100% enquanto observa o campo HSL atualizar em tempo real. Útil para gerar uma matiz clara ou escura visualmente antes de travar a porcentagem exata. Em navegadores baseados em Chromium (Chrome, Edge, Brave) o botão EyeDropper ativa a API nativa `EyeDropper` para amostrar qualquer pixel na tela, incluindo fora do navegador.

Erros Comuns de HEX / HSL

Assumir Que a Luminosidade do HSL é Perceptualmente Uniforme

Um verde em `hsl(120 100% 50%)` parece visivelmente mais brilhante do que um azul em `hsl(240 100% 50%)`, mesmo que ambos estejam em L=50%. Gerar rampas de matiz clara varrendo L produz resultados visualmente irregulares entre matizes — a ponta clara da rampa verde sobe mais rápido do que a da rampa azul. Esta é uma propriedade estrutural do HSL herdar as peculiaridades de gama do sRGB, não um bug no seu código. Para rampas perceptualmente uniformes, troque para OKLCH.

✗ Incorreto 
Sweep HSL L for a 9-step palette:
hsl(120 100% 50%) and hsl(240 100% 50%) at the same L
Look visibly different in brightness — palette feels uneven.
✓ Correto 
Sweep OKLCH L instead:
oklch(0.7 0.2 130) and oklch(0.7 0.2 250)
Look equally bright; palette reads coherent across all hues.

Esquecer Que Matiz Faz Wrap em 360°

Matiz do HSL é angular — `hsl(370 91% 60%)` é interpretado como `hsl(10 91% 60%)` porque 370° mod 360° = 10°. Animar matiz de 350° para 380° faz wrap limpamente através de 360°/0° (uma fatia fina de vermelho), mas interpolar linearmente de H=350 para H=10 do lado errado pega o *caminho longo* por ciano, verde, amarelo — 320° de desvio. Use `Math.min(diff, 360 - diff)` para escolher o caminho curto, ou use a interpolação de matiz embutida de uma biblioteca de cor.

✗ Incorreto 
Linear interpolation from H=350 to H=10:
(350 + 10) / 2 = 180° (cyan midpoint)
Wrong — goes the long way around the wheel.
✓ Correto 
Short-path hue interpolation:
midpoint = ((350 + 10 + 360) / 2) % 360 = 0° (red midpoint)
Goes through red, the short path around the wheel.

Confundir HSL com HSV

HSL e HSV compartilham o eixo de matiz mas diferem no terceiro eixo. A Luminosidade do HSL é simétrica — 0% preto, 50% matiz pura, 100% branco. O Value do HSV é assimétrico — 0% preto, 100% matiz pura, branco só quando Saturação cai para 0. `hsl(0 100% 100%)` é branco; `hsv(0 100% 100%)` é vermelho puro. Muitas bibliotecas de cor e ferramentas de design (seletor HSB do Photoshop, painel de cor do Sketch) usam HSV — copiar valores entre os dois sistemas sem converter produz cores totalmente diferentes.

✗ Incorreto 
Paste HSV values from Photoshop into a CSS hsl() rule:
Photoshop HSB 0, 100, 100 (pure red)
CSS hsl(0 100% 100%) renders as white — wrong color entirely.
✓ Correto 
Convert HSV → HSL before pasting into CSS:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) renders as pure red — correct.

Esquecer os Sinais de Porcentagem no HSL

Os eixos S e L do HSL exigem o sufixo `%` no CSS — `hsl(217 91 60)` é um erro de parse em todo navegador; a forma correta é `hsl(217 91% 60%)`. Apenas Matiz é adimensional (sua unidade são graus, mas o sufixo é opcional). Muitos conversores ad-hoc esquecem de emitir os sinais de porcentagem na sua saída HSL, produzindo CSS inválido que silenciosamente falha quando colado. A ferramenta sempre emite os sinais de porcentagem no campo HSL.

✗ Incorreto 
Emit HSL without percent signs:
hsl(217 91 60)
CSS parse error — every browser ignores the entire rule.
✓ Correto 
Emit HSL with percent signs on S and L:
hsl(217 91% 60%)
Valid CSS — works in every evergreen browser and IE 9+.

Quem Usa HEX para HSL

Devs Front-end Definindo Variáveis CSS HSL
Defina `--primary: hsl(217 91% 60%)` uma vez a partir do hex do Figma, depois componha `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)` ajustando apenas o número de L. Cole o hex uma vez, leia a tripla HSL, jogue no bloco de propriedade customizada CSS. O padrão que design systems legados usavam para manter matizes claras e escuras tonalmente coerentes antes que rampas baseadas em OKLCH assumissem.
Designers Traduzindo Hex para Seletor HSL
Designers criados em seletores de matiz + saturação + value (Adobe, Sketch, modo HSB do Figma) frequentemente querem a tripla HSL mesmo quando o arquivo-fonte entrega hex. Colar o hex uma vez produz o HSL correspondente, pronto para ler na posição mental da roda de cores do designer sem um chute manual. Útil ao revisar uma spec de cor de marca e querer saber onde ela fica na roda de matiz em relação a outras cores de marca da família.
Autores de Sistema de Tema Computando Tokens de Modo Escuro
Temas em modo escuro frequentemente invertem L mantendo H e S — um primary `hsl(217 91% 60%)` em modo claro mapeia para um `hsl(217 91% 40%)` (ou similar) em modo escuro. Cole o hex do modo claro, leia o HSL, compute o L do modo escuro, escreva o novo HSL de volta no token de tema escuro. O padrão é mecânico quando você tem a tripla HSL; é bem mais trabalhoso fazer com canais RGB brutos.
Autores de Design System Gerando Rampas de Matizes Claras e Escuras
Gere uma rampa de 9 passos de matizes claras/escuras varrendo L: `hsl(217 91% 95%)` (mais claro), 85%, 75%, 65%, 55%, 45%, 35%, 25%, `hsl(217 91% 15%)` (mais escuro). Cole o hex base, leia o HSL, varra L em passos de 10% mentalmente ou em código. (Para rampas perceptualmente uniformes onde cada passo parece igualmente brilhante, troque para o campo OKLCH ao lado — rampas HSL parecem irregulares entre matizes porque L não é perceptualmente uniforme.)
Autores CSS Usando Matemática hsl(from ...) em Tempo de Execução
O CSS moderno suporta sintaxe `color-function-from`: `hsl(from var(--primary) h s calc(l + 10%))` deriva uma variante mais clara de `--primary` em tempo de renderização, sem pré-computar cada passo. Cole o hex de marca, confirme a tripla HSL, jogue a base em uma variável CSS e use a matemática em tempo de execução para tokens derivados. Vem no Chrome 119+, Safari 17.2+, Firefox 128+.
Devs Front-end Construindo Conjuntos de Token HSL do Tailwind v3
O Tailwind v3 armazenava cores de tema como triplas HSL separadas por espaços em variáveis CSS (`--primary: 217 91% 60%`), compostas via `hsl(var(--primary))` em `tailwind.config.js`. Cole o hex de marca, leia o HSL, jogue os três números (sem o wrapper `hsl(...)`) na definição de variável. O Tailwind v4 desde então pivotou para OKLCH-first, mas bases de código v3 ainda usam o padrão HSL e vão usar por anos.
Autores de UI de Seletor de Cor Mapeando Hex para Controles HSL
Construir um seletor de cor que expõe matiz / saturação / luminosidade como três sliders separados (a UI clássica estilo Adobe) significa mapear um hex de entrada para os três controles do seletor. Cole o hex aqui, leia a tripla HSL, posicione os três sliders programaticamente. A conversão é a mesma que seu seletor rodaria internamente; esta ferramenta expõe os valores intermediários para depuração.
Engenheiros de Acessibilidade Ajustando Luminosidade de Cor de Marca para Contraste
Quando uma cor de marca falha no contraste WCAG contra um fundo, a correção barata é subir L até a razão passar — sem mudar H ou S, a cor continua sendo lida como a mesma identidade de marca. Cole o hex de marca, observe as badges de contraste, ajuste mentalmente L (ou use o eixo L do seletor) até WCAG e APCA passarem. O campo HSL expõe a nova porcentagem de L para o doc de spec; o campo hex expõe o código correspondente para a folha de estilo.

Matemática e Parsing de HEX para HSL

HEX → RGB → HSL é um Pipeline de Dois Passos
A conversão passa por RGB como intermediário. Passo um: interprete o hex para inteiros RGB via `parseInt(hex.slice(1, 3), 16)` por canal. Passo dois: normalize RGB para 0-1, compute `max`/`min`/`delta`, aplique a trigonometria por trechos do CSS Color 4 §6.4: `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = por trechos * 60`. A estrutura de dois passos é porque a ferramenta também expõe a tupla RGB intermediária — é grátis de exibir e útil para depuração.
CSS Color 4 §6.4 Define o Algoritmo de Referência
A especificação W3C CSS Color 4 §6.4 (algoritmo de `rgb()` para `hsl()`) define a matemática canônica por trechos: luminosidade como o ponto médio de max e min, saturação como `delta / (1 - |2L - 1|)` (com S = 0 quando delta = 0, para evitar divisão por zero em cinzas), matiz como uma trigonometria de 60 graus por passo sobre qual canal é o máximo. A spec também trata casos limite: preto puro (`#000`) gera `hsl(0 0% 0%)` com matiz arbitrária de 0°; branco puro (`#FFF`) gera `hsl(0 0% 100%)` da mesma forma; cinza puro gera `hsl(0 0% 50%)`.
Matiz Faz Wrap em 360°, S e L São Porcentagens
Os três eixos do HSL têm unidades diferentes. Matiz é um grau angular de 0 a 360 com wrap — `hsl(370 ...)` é interpretado como `hsl(10 ...)` porque posições angulares fazem wrap. Saturação e Luminosidade são porcentagens de 0% a 100%, sem wrap; valores fora da faixa são cortados. O CSS Color 4 também aceita matiz em turns (`hsl(0.6turn ...)`) ou radianos (`hsl(3.787rad ...)`); a saída da ferramenta usa graus porque é a forma mais comum em UIs de ferramenta de design e documentos de spec de marca.
A Luminosidade do HSL NÃO é Perceptualmente Uniforme
Um verde em `hsl(120 100% 50%)` parece visivelmente mais brilhante do que um azul em `hsl(240 100% 50%)`, mesmo que ambos tenham a mesma Luminosidade nominal — porque o HSL herda as peculiaridades de gama do sRGB e usa a mesma escala L em todo matiz. É por isso que rampas de matiz clara baseadas em HSL parecem irregulares (a ponta clara da rampa verde sobe mais rápido do que a ponta clara da rampa azul) e por que design systems migraram em grande parte para OKLCH para geração de rampa. A ferramenta expõe HSL e OKLCH para que a escolha fique a um olhar de distância.
Fonte-de-Verdade Interna em OKLCH para Estabilidade de Round-Trip
Mesmo que este spoke mire em HEX → HSL especificamente, o conversor compartilhado por baixo mantém a cor canônica como uma tripla OKLCH internamente. Round-trips HEX → HSL → RGB → OKLAB → HEX permanecem bit-estáveis; conversores legados de pivô em HSL acumulam erro de arredondamento e podem desviar o matiz em vários graus ao longo de algumas conversões. O pivô em OKLCH também preserva Matiz como eixo estável, então arrastar o slider de matiz não cruza acidentalmente pelo cinza. Segundo o paper OKLAB de 2020 de Björn Ottosson.
Codificação de Canal: 8-Bit Sem Sinal, Gama-Codificado em sRGB
Códigos hex codificam canais RGB sem sinal de 8 bits (0-255) no espaço de cor sRGB definido pela IEC 61966-2-1 (1996). Os valores são *gama-codificados* — a relação entre valor do canal e brilho percebido é não-linear, seguindo a função de transferência sRGB por trechos (aproximadamente um expoente 2,4 com um pequeno segmento linear perto de zero). O HSL é derivado diretamente desses valores RGB gama-codificados sem nenhum passo de linearização, o que é a causa raiz do problema de uniformidade perceptual do HSL. O OKLCH lineariza primeiro e depois remapeia para um espaço perceptualmente uniforme; o HSL não.

Boas Práticas para Fluxos HEX / HSL

Use Sintaxe HSL Moderna Separada por Espaços em Código Novo
`hsl(217 91% 60%)` (separado por espaços) e `hsl(217 91% 60% / 0.5)` (barra para alfa) do CSS Color 4 são as sintaxes canônicas para código embarcando em 2025 e adiante. As formas legadas com vírgulas `hsl(217, 91%, 60%)` e `hsla(217, 91%, 60%, 0.5)` ainda têm suporte em todo lugar, mas são depreciadas estilisticamente no CSS Color 4. Use a sintaxe moderna em folhas de estilo novas; mantenha `hsla()` apenas para contextos de fallback IE 9-11 onde você genuinamente precisa de suporte legado.
Gere Rampas em OKLCH, Não em HSL
O eixo de Luminosidade do HSL não é perceptualmente uniforme — uma varredura de 9 passos em L produz uma rampa onde os passos verdes parecem mais brilhantes do que os passos azuis em todo valor de L. Para rampas onde cada passo deve parecer igualmente brilhante (o pedido padrão do design system), gere em OKLCH: `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)`, etc. A ferramenta expõe HSL e OKLCH para o mesmo hex, então trocar entre os dois fica a um clique de Copiar de distância.
Trave Matiz e Saturação, Varra Luminosidade
Ao usar HSL para trabalho de matiz clara/escura, mude apenas o número de L — mantenha H e S idênticos pela rampa toda. Deriva de matiz (mesmo de 5°) deixa uma rampa bagunçada. Deriva de saturação deixa a ponta clara parecendo desbotada e a ponta escura parecendo enlameada. A disciplina de um-eixo-de-cada-vez é o que dá ao HSL sua reputação amigável para design; abandoná-la te dá o pior dos dois mundos.
Prefira Hex para Tokens Fonte-de-Verdade, HSL para Variantes Computadas
Quando você está escrevendo uma spec de design token, prefira hex (ou OKLCH) como forma canônica — eles são mais concisos e cabem limpamente em JSON ou YAML. O HSL é mais útil para tokens *derivados* em tempo de execução (`hsl(from var(--primary) h s calc(l + 10%))`) do que como formato fonte-de-verdade. Os dois formatos descrevem a mesma cor; a escolha é sobre que papel o token desempenha no sistema.
Documente Variantes HSL com o Hex Base
Quando você embarca uma variável CSS como `--primary-light: hsl(217 91% 70%)`, inclua um comentário apontando de volta para o hex base: `/* base: #3b82f6 → hsl(217 91% 60%), variante clara +10% L */`. Seis meses depois, quando alguém quiser derivar `--primary-lighter`, eles precisam da cor base para computar — e o HSL sozinho não expõe isso. O hex + HSL juntos preservam a procedência completa.
Use o Hash de URL para Compartilhar Decisões de Cor ao Vivo
Toda mudança de cor atualiza o hash da URL como `#hex=3b82f6` automaticamente. Copie a URL em uma thread do Slack ou uma issue do GitHub e qualquer um que abrir cai na mesma cor com a mesma tripla HSL. Isso é mais confiável do que colar uma string HSL no chat — destinatários às vezes erram o grau ou perdem um sinal de porcentagem ao digitar manualmente o valor — e deixa uma thread de design review referenciar uma cor exata em vez de "o azul que discutimos terça". O hash nunca é transmitido ao servidor.

Perguntas Frequentes

Como converto hex para HSL?
Primeiro converta o hex para inteiros RGB via `parseInt(hex, 16)`, depois normalize cada canal para 0-1 dividindo por 255, depois compute `max`/`min`/`delta` pelos três canais e aplique a trigonometria por trechos do CSS Color 4 §6.4: luminosidade = `(max + min) / 2`, saturação = `delta / (1 - |2L - 1|)` (zero quando delta é zero), matiz = por trechos sobre qual canal é o máximo (60° por passo ao redor da roda). `#3b82f6` interpreta para `rgb(59 130 246)` e depois converte para `hsl(217 91% 60%)`. Esta ferramenta roda o pipeline inteiro ao vivo enquanto você digita.
O que é a cor HSL?
HSL é uma reformulação cilíndrica do espaço de cor sRGB em três eixos perceptualmente significativos: Matiz (0-360°, posição angular na roda de cores — 0° vermelho, 120° verde, 240° azul), Saturação (0-100%, intensidade cromática — 0% cinza, 100% totalmente cromático) e Luminosidade (0-100%, brilho — 0% preto, 50% matiz pura, 100% branco). Alvy Ray Smith publicou a derivação em 1978 para dar a designers um sistema de coordenadas mais próximo de como eles pensam sobre cor do que o endereçamento bruto de canais RGB. O HSL está no CSS desde 2010 (CSS3) e vem em todo navegador.
Qual é a diferença entre HSL e HSV?
Ambos são reformulações cilíndricas do sRGB com eixos de matiz idênticos, mas tratam o terceiro eixo de forma diferente. A Luminosidade do HSL vai de preto em 0% passando por matiz pura em 50% até branco em 100% — simétrica, então `hsl(0 100% 50%)` é vermelho puro e `hsl(0 100% 100%)` é branco. O Value do HSV vai de preto em 0% até matiz pura em 100% — assimétrico, então `hsv(0 100% 100%)` é vermelho puro e o branco só aparece quando a saturação cai para 0. O HSL é mais útil para rampas de matiz clara/escura de design system porque o ponto médio de 50% marca a referência de cor pura; o HSV é mais útil para seletores de cor porque o quadrado saturação/value mapeia limpamente para uma UI de seletor SV.
Por que usar HSL em vez de RGB?
Três motivos. Primeiro, sliders intuitivos — mover L de 60% para 70% produz previsivelmente uma matiz mais clara da mesma cor; mover R de 130 para 150 produz um deslocamento de cor menos previsível. Segundo, geração de paleta — `hsl(217 91% 60%)`, `hsl(217 91% 70%)`, `hsl(217 91% 80%)` é uma rampa de matizes claras tonalmente coerente gerada mudando um número; o mesmo em RGB precisa de três edições coordenadas. Terceiro, matemática CSS em tempo de execução — o CSS moderno permite que você compute `hsl(from var(--primary) h s calc(l + 10%))` para derivar uma variante mais clara a partir de um token base sem pré-computar cada passo. O RGB não tem essa conveniência de eixo cilíndrico.
Como se lê um valor HSL?
O HSL tem três partes em ordem: Matiz, Saturação, Luminosidade. `hsl(217 91% 60%)` significa matiz = 217° (um azul limpo, logo depois do território de azul puro em 240° e voltando em direção ao ciano), saturação = 91% (altamente cromática, quase sem cinza), luminosidade = 60% (um nó mais brilhante do que o ponto médio da matiz pura). Matiz é o único eixo sem sufixo de porcentagem porque é expresso em graus — valores fazem wrap em 360°, então `hsl(370 ...)` é idêntico a `hsl(10 ...)`. O valor prefixado por barra no final (se presente) é alfa na faixa 0-1: `hsl(217 91% 60% / 0.5)` é a mesma cor com 50% de opacidade.
O CSS suporta HSL?
Sim — o HSL está no CSS desde o CSS3 em 2010 e vem em todo navegador, incluindo o IE 9. A sintaxe original usava vírgulas: `hsl(217, 91%, 60%)` para opaco e `hsla(217, 91%, 60%, 0.5)` para com alfa. O CSS Color 4 (Candidate Recommendation do W3C desde 2022) adicionou a forma moderna separada por espaços: `hsl(217 91% 60%)` e `hsl(217 91% 60% / 0.5)` com alfa prefixado por barra. O matiz também pode ser expresso em turns ou radianos (`hsl(0.6turn 91% 60%)` é idêntico a `hsl(217 91% 60%)`). Ambas as sintaxes legada e moderna são intercambiáveis em todos os navegadores evergreen.
O que o L do HSL significa?
Lightness (luminosidade). O eixo 0-100% que controla o quão brilhante a cor aparece, com 0% mapeando para preto puro e 100% para branco puro. O ponto médio (50%) é onde a matiz pura vive — `hsl(0 100% 50%)` é vermelho puro, enquanto `hsl(0 100% 25%)` é um vermelho mais escuro e `hsl(0 100% 75%)` é um rosa mais claro. Luminosidade é a contraparte simétrica do Value assimétrico do HSV. Note que a luminosidade do HSL *não* é perceptualmente uniforme — um verde em L=50% parece visivelmente mais brilhante do que um azul em L=50% porque o HSL herda as peculiaridades de gama do sRGB; para uniformidade perceptual, vá para o OKLCH.
Qual a precisão da conversão de hex para HSL?
O passo HEX → RGB é bit-exato (`parseInt(hex, 16)` retorna inteiros sem envolvimento de float). O passo RGB → HSL envolve trigonometria e divisão, então a saída é um float que a ferramenta arredonda para graus inteiros e porcentagem inteira para exibição. Um round-trip HEX → HSL → HEX recupera o hex original dentro de 1 unidade de canal (o erro de arredondamento de exibir H como grau inteiro). Para trabalho sem perdas, o OKLCH é um formato interno melhor — esta ferramenta na verdade mantém OKLCH como fonte-de-verdade internamente, depois deriva o HSL na exibição, então a estabilidade do round-trip é melhor do que conversores ingênuos que pivotam em HSL.

Ferramentas relacionadas

Ver todas as ferramentas →

Conversor de Base Numérica — Binário, Hex, Decimal e Octal

Ferramentas de Conversão

Converta números entre binário, hexadecimal, decimal, octal e qualquer base personalizada (2-36) instantaneamente. Gratuito, privado, sem cadastro — todo o processamento acontece no seu navegador.

Conversor de Cores — HEX, RGB, HSL e OKLCH

Ferramentas de Conversão

Converta HEX para RGB, HSL, OKLCH, OKLAB e CMYK no seu navegador — copie qualquer formato com um clique. Grátis, sem cadastro, suas cores nunca saem da página.

Conversor de HEX para CMYK

Ferramentas de Conversão

Converta cores HEX para CMYK no seu navegador. Aproximação ingênua baseada em sRGB para prévias de impressão. Grátis, sem cadastro, suas cores ficam locais.

Conversor de HEX para OKLCH

Ferramentas de Conversão

Converta HEX para OKLCH para tokens de design do Tailwind v4. Saída perceptualmente uniforme ao vivo com avisos de gama Display P3. Grátis, apenas no navegador.

Conversor de HEX para RGB

Ferramentas de Conversão

Converta qualquer código de cor HEX para RGB no seu navegador — hex de 3, 6 e 8 dígitos com alfa, todos suportados. Grátis, instantâneo, sem cadastro, suas cores nunca saem da página.

Comprimir Imagens Online — JPEG, PNG e WebP

Ferramentas de Conversão

Reduza o tamanho de imagens em até 80% — comprima JPEG, PNG e WebP no navegador, sem upload. Lote de 20 imagens, ajuste de qualidade, compare antes e depois. Gratuito e privado.