GeradoresOnline
Utilidades

Color Picker

Escolha uma cor e veja seu código em HEX, RGB e HSL.

HEX #6c5ce7
RGB rgb(108, 92, 231)
HSL hsl(248, 73%, 63%)
Documentação técnica

Color Picker: HEX, RGB e HSL são a mesma cor, três modelos diferentes

HEX (#6c5ce7), RGB (rgb(108, 92, 231)) e HSL (hsl(248, 73%, 63%)) não são três formatos de texto para o mesmo dado bruto — são três modelos de cor diferentes, cada um organizando a informação de cor por eixos conceituais distintos. HEX e RGB são essencialmente a mesma representação (componentes de vermelho, verde e azul, só que HEX em hexadecimal compacto e RGB em decimal explícito) — a conversão entre os dois é direta, sem perda, por ser puramente uma mudança de base numérica. HSL é estruturalmente diferente: organiza a cor por matiz (Hue, a posição no círculo cromático, 0-360°), saturação (Saturation, intensidade da cor) e luminosidade (Lightness) — eixos que descrevem como um ser humano intuitivamente pensa sobre cor, não como um sensor de câmera captura luz.

Por que HSL é mais fácil para ajustar uma cor, não só exibi-la

A vantagem prática do modelo HSL aparece na hora de ajustar uma cor, não só de representá-la: "deixar essa cor 20% mais clara" é uma operação trivial em HSL (aumentar o componente de luminosidade), mas exige recalcular os três componentes de RGB proporcionalmente de forma não óbvia para produzir o mesmo efeito perceptivo. É por isso que ferramentas de design e paletas de cores geradas programaticamente (variações de uma cor-base para hover, estado ativo, texto secundário) costumam trabalhar internamente em HSL, mesmo que o valor final seja convertido para HEX ou RGB na hora de aplicar no CSS.

Por que a conversão RGB → HSL não é um simples remapeamento linear

A fórmula de conversão de RGB para HSL envolve encontrar o valor máximo e mínimo entre os três componentes RGB, calcular a diferença entre eles (que determina a saturação), e usar qual componente é o máximo para determinar em qual "sexto" do círculo de matiz a cor cai — uma lógica condicional, não uma fórmula algébrica única e contínua. É essa complexidade de conversão (não trivial de implementar corretamente da primeira vez) que torna um color picker que já mostra os três formatos simultaneamente mais útil do que calcular manualmente cada conversão quando necessário.

Gostou das ferramentas? Ajude a manter o site no ar: apoiar via Pix · Sobre · Contato · Política de Privacidade