Converter RGB para HSL

Converta uma cor RGB em seu equivalente HSL e receba um resultado compacto e previsível, fácil de usar em ferramentas de design, folhas de estilo e código de aplicativos. Informe os canais vermelho, verde e azul entre 0 e 255. O conversor retorna o matiz em um círculo de 0–360 graus e a saturação e a luminosidade como porcentagens de 0 a 100. Canais ausentes, não numéricos, infinitos ou fora do intervalo são rejeitados, em vez de corrigidos silenciosamente, para que os erros continuem visíveis e os dados posteriores sejam confiáveis.

Informe os canais RGB corretamente

Forneça três campos numéricos para vermelho, verde e azul usando os nomes abreviados r, g e b. Cada canal deve ficar entre 0 e 255, inclusive. Zero indica que o canal não contribui com intensidade, enquanto 255 representa intensidade total.

Valores decimais intermediários também são permitidos, o que ajuda quando outro cálculo produz cores interpoladas. O conversor não limita valores inválidos de propósito. Se um canal for negativo, maior que 255, ausente, não numérico ou infinito, a solicitação retornará um erro de entrada.

Esse comportamento rigoroso torna fluxos automatizados mais seguros, pois um valor de origem inválido não pode virar silenciosamente uma cor plausível, porém incorreta. Para um primeiro teste conhecido, use r 255, g 0 e b 0; o resultado será vermelho com matiz de zero grau, saturação total e cinquenta por cento de luminosidade. Ao copiar valores de CSS, envie apenas os números dos canais, sem o invólucro rgb(), vírgulas ou sinais de porcentagem.

Manter a entrada numérica também evita confusão entre a escala RGB de 0–255 e a notação percentual adotada por alguns sistemas de design.

Entenda como o resultado HSL é calculado

A conversão primeiro normaliza cada canal RGB dividindo-o por 255. Depois, identifica o maior e o menor canal normalizado. A média entre eles se torna a luminosidade, e a diferença, chamada croma, determina se a cor tem saturação e um matiz significativo.

Quando o croma é zero, a cor é um tom de cinza: a saturação é zero e o matiz retorna como zero por convenção, porque nenhuma posição no círculo cromático é visualmente distinta. Para cores cromáticas, a saturação corresponde ao croma ajustado à luminosidade atual, e o matiz depende de qual canal RGB é o maior. Vermelho, verde e azul ocupam setores diferentes do círculo, e as diferenças relativas selecionam a posição dentro do setor.

O matiz retornado é expresso em graus desde zero até menos de 360. Saturação e luminosidade são multiplicadas por 100 e expressas em porcentagens. Os resultados são arredondados para quatro casas decimais, oferecendo precisão útil com respostas estáveis e legíveis.

Essa é a transformação RGB para HSL padrão: ela reorganiza as mesmas informações e não aplica gerenciamento de cores, correção de gama nem conversão de perfis.

Use HSL em fluxos de design e aplicativos

HSL costuma ser mais fácil de interpretar que RGB quando você precisa criar variações. O matiz identifica a família da cor, a saturação controla quanto ela parece viva ou acinzentada, e a luminosidade a aproxima do preto ou do branco. Depois de converter uma cor de marca, você pode manter o matiz e ajustar a luminosidade para estados de foco, pressionado ou desativado.

Um pipeline de dados pode normalizar registros de cores variados em uma representação HSL comum antes de ordenar ou agrupar. Uma verificação de qualidade também pode comparar os valores retornados com tokens de design e rejeitar canais RGB malformados logo no início. Lembre-se de que alterações numéricas iguais não garantem mudanças visuais iguais; HSL é prático para controles, mas não é um espaço de cor perceptualmente uniforme.

Preserve também os valores RGB originais quando conversões reversas exatas forem importantes, pois o arredondamento pode causar uma pequena diferença na volta. A operação é determinística e depende apenas dos números fornecidos: não acessa a rede, não usa aleatoriedade, relógio ou banco de cores externo.