Conversor de RGB para HSL: Tradutor de Modelo de Cor

Conversor de RGB para HSL

rgb(59, 130, 246) converte para hsl(217, 91%, 60%). O matiz 217° coloca esta cor na parte azul do círculo cromático, a saturação de 91% significa que está quase totalmente vívida, é a luminosidade de 60% a posiciona em um brilho médio. O HSL separa a identidade da cor da intensidade, o que torna muito mais fácil trabalhar programaticamente do que com RGB.

O Que HSL Significa

HSL significa Matiz (Hue), Saturação (Saturation), Luminosidade (Lightness). Cada componente descreve uma qualidade diferente de uma cor:

As posições do círculo cromático para matiz:

  0° / 360°  — Vermelho
       60°   — Amarelo
      120°   — Verde
      180°   — Ciano
      240°   — Azul
      300°   — Magenta

hsl(217, 91%, 60%) está em 217°, entre ciano (180°) e azul (240°), mais próximo do azul. Com 91% de saturação está quase totalmente vívido. Com 60% de luminosidade está ligeiramente acima do ponto médio da cor pura.

Por Que HSL é Melhor para Cor Programática

Com RGB, não existe um canal direto para brilho. Para clarear rgb(59, 130, 246), você precisa escalar todos os três canais em direção ao 255 mantendo suas proporções. Para escurecer, escalar em direção ao 0. A matemática é propensa a erros e não intuitiva.

Com HSL, você ajusta um valor:

/* Cor base */
--color: hsl(217, 91%, 60%);

/* Variante mais clara — apenas aumente a luminosidade */
--color-light: hsl(217, 91%, 75%);

/* Variante mais escura — apenas diminua a luminosidade */
--color-dark: hsl(217, 91%, 40%);

/* Variante dessaturada (discreta) */
--color-muted: hsl(217, 30%, 60%);

/* Cor complementar — gire o matiz em 180° */
--color-complement: hsl(37, 91%, 60%);

Este padrão é como sistemas de design geram paletas de cores completas a partir de um único matiz base. Bibliotecas como a paleta do Tailwind, Radix Colors e Polished todas operam em HSL ou em um modelo cilíndrico similar.

Algoritmo de Conversão

A conversão de RGB para HSL envolve normalizar os canais para [0, 1], encontrar os valores mínimo e máximo dos canais e derivar cada componente HSL:

function rgbToHsl(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0;
  let s = 0;
  const l = (max + min) / 2;

  if (delta !== 0) {
    s = delta / (1 - Math.abs(2 * l - 1));

    if (max === r) h = ((g - b) / delta) % 6;
    else if (max === g) h = (b - r) / delta + 2;
    else h = (r - g) / delta + 4;

    h = Math.round(h * 60);
    if (h < 0) h += 360;
  }

  return {
    h,
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

rgbToHsl(59, 130, 246); // { h: 217, s: 91, l: 60 }

# Python — note que colorsys usa ordem HLS, não HSL
import colorsys

r, g, b = 59 / 255, 130 / 255, 246 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)

print(round(h * 360), round(s * 100), round(l * 100))
# 217 91 60

Função hsl() no CSS

CSS aceita cores HSL nativamente:

/* Sintaxe moderna (CSS Color Level 4) — sem vírgulas */
color: hsl(217 91% 60%);

/* Com alfa */
color: hsl(217 91% 60% / 0.5);

/* Sintaxe legada */
color: hsla(217, 91%, 60%, 0.5);

A sintaxe moderna sem vírgulas é suportada em todos os navegadores atuais e é o que o CSS Color Level 4 padroniza. Ambas as formas produzem o mêsmo resultado.

HSL em Sistemas de Design

Propriedades personalizadas baseadas em HSL são um padrão para theming:

:root {
  --brand-hue: 217;
  --brand-saturation: 91%;

  --color-50:  hsl(var(--brand-hue) var(--brand-saturation) 95%);
  --color-100: hsl(var(--brand-hue) var(--brand-saturation) 90%);
  --color-200: hsl(var(--brand-hue) var(--brand-saturation) 80%);
  --color-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --color-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
  --color-900: hsl(var(--brand-hue) var(--brand-saturation) 20%);
}

Altere --brand-hue e toda a escala se desloca. Esta é a base do theming com um único token em sistemas de design.

Limitações do HSL

HSL é intuitivo mas não é perceptualmente uniforme. Duas cores com o mêsmo valor de luminosidade HSL não parecerão igualmente brilhantes aos olhos humanos. Amarelo em hsl(60, 100%, 50%) parece visivelmente mais claro que azul em hsl(240, 100%, 50%).

Para sistemas de cores que precisam ser visualmente consistentes entre matizes (paletas focadas em acessibilidade, visualização de dados), oklch é uma escolha melhor. É um modelo perceptualmente uniforme onde mudanças iguais na luminosidade produzem aparências igualmente diferentes em todos os matizes. CSS suporta nativamente: oklch(60% 0.15 250).