Conversor de cor RGB para HSL

O valor de matiz (H) mostra a posicao da sua cor na roda cromatica, a saturacao (S) mostra o quao viva ou apagada ela e, e a luminosidade (L) mostra o quao proxima do preto ou do branco ela esta. Juntos, esses tres valores podem ser usados diretamente em CSS como hsl(H, S%, L%).

Primeiro R, G e B sao escalados para um intervalo de 0 a 1. A luminosidade (L) e a media do canal mais alto e do mais baixo. A saturacao (S) e a diferenca entre os canais em relacao a luminosidade, e o matiz (H) e calculado num intervalo de 0 a 360 graus com base no canal dominante.

• Os valores R, G, B sao divididos por 255 para serem escalados para um intervalo de 0 a 1.
• O maior (max) e o menor (min) dos valores escalados sao identificados.
• A luminosidade (L) e calculada como a media dos valores max e min.
• A saturacao (S) e obtida normalizando a diferenca max-min em relacao a luminosidade.
• O matiz (H) e calculado num intervalo de 0 a 360 graus com base no canal dominante (R, G ou B).

R=52, G=152, B=219 (um azul vivo) equivale a aproximadamente H=204 graus, S=70%, L=53%.

• Insira R, G e B como numeros inteiros entre 0 e 255; valores fora desse intervalo nao representam uma cor valida.
• O matiz (H) e uma posicao numa roda de cores de 0 a 360 graus: 0 e vermelho, 120 e verde, 240 e azul.
• A saturacao e a luminosidade sao lidas em porcentagem; 0% de saturacao e um tom de cinza e 100% de luminosidade e branco.

O modelo RGB (Vermelho, Verde, Azul) reflete exatamente como as telas produzem cor emitindo luz: cada canal recebe um valor de intensidade de 0 a 255, e a combinacao dos tres canais produz milhoes de cores distintas. Porem, esse modelo nao e intuitivo quando voce quer tornar uma cor 'mais clara' ou 'mais viva', pois seria preciso ajustar os tres canais ao mesmo tempo.

O modelo HSL (Matiz, Saturacao, Luminosidade) descreve as cores como o olho humano as percebe: o matiz identifica qual e a cor (vermelho, verde, roxo), a saturacao mostra sua intensidade, e a luminosidade mostra o quao clara ou escura ela e. Por isso designers e desenvolvedores costumam preferir o HSL ao criar paletas de cores.

Esta ferramenta escala sua entrada RGB para um intervalo de 0 a 1 e depois encontra os valores de canal mais altos e mais baixos para calcular a luminosidade e a saturacao. Em seguida, determina qual canal e dominante para encontrar a posicao exata do matiz na roda cromatica.

A maior vantagem do formato HSL e que ele pode ser usado diretamente em CSS como hsl(matiz, saturacao%, luminosidade%). Por exemplo, para criar uma variante mais escura da cor principal de uma marca, basta reduzir a luminosidade; em RGB seria necessario recalcular os tres canais separadamente.

Conversoes de cor como esta sao comuns em design web, criacao de logotipos, visualizacao de dados e sistemas de temas de interface. Converter RGB para HSL e um ponto de partida pratico para desenvolvedores que querem criar variantes de tema claro/escuro ou uma paleta de cores consistente.