HEX, RGB e HSL são três formas de escrever a mesma cor na web. RGB descreve a cor pela quantidade de vermelho, verde e azul; HEX é essa mesma mistura em código hexadecimal; e HSL usa matiz, saturação e luminosidade. Todos apontam para a mesma cor na tela, apenas com notações diferentes.
Qual a diferença entre HEX, RGB e HSL
No RGB cada canal (vermelho, verde e azul) vai de 0 a 255, como em rgb(255, 87, 51). O HEX escreve esses mesmos três valores em base 16, no formato #FF5733, em que cada par de caracteres é um canal. Já o HSL parte de outra lógica: matiz é o ângulo da cor na roda (0 a 360 graus), saturação é a intensidade e luminosidade é o quão clara ou escura ela é. Os três representam exatamente a mesma cor, então dá para converter de um para o outro sem perda.
Quando usar cada formato
HEX é o mais comum em CSS e em ferramentas de design por ser curto e fácil de copiar. RGB é prático quando você precisa de transparência, com a variação rgba, ou quando manipula canais por código. HSL é o mais intuitivo para ajustar uma cor na mão: para escurecer, basta baixar a luminosidade; para deixar mais viva, subir a saturação, sem recalcular três canais. Muitos criadores escolhem a paleta em HSL e exportam em HEX para o código final.
