Conversor RGB ↔ HSL
Converta três valores RGB para HSL, ou três valores HSL para RGB, nos dois sentidos.
Não acredita? Desligue sua internet e teste — continua funcionando.
Como funciona
RGB descreve uma cor pela quantidade de vermelho, verde e azul (0 a 255 cada). HSL descreve a mesma cor de um jeito mais intuitivo para ajustes visuais: matiz (a cor em si, 0 a 360°), saturação (intensidade, 0 a 100%) e luminosidade (quão clara ou escura, 0 a 100%). Por que usar HSL no CSS: para criar um tom mais claro de uma cor, basta aumentar a luminosidade, sem recalcular três canais. Exemplo: rgb(59, 130, 246) é hsl(217, 91%, 60%); subir o L para 80% dá um azul bem mais claro, com a mesma matiz. Nos extremos, a matiz e a saturação deixam de importar: com L = 0% o resultado é sempre preto, e com L = 100%, sempre branco. E com S = 0% você tem um cinza, qualquer que seja o H.