Três notações, uma cor
HEX, RGB e HSL são a mesma cor escrita de três jeitos. Os pixels saem idênticos, então use a que for mais cômoda onde você estiver.
HEX é #RRGGBB, o que as ferramentas de design exportam e os desenvolvedores colam. Curto e fácil de copiar.
RGB escreve vermelho, verde e azul de 0 a 255. É a forma que você quer quando o código calcula uma cor ou desenha direto num canvas.
HSL traz matiz (de 0 a 360 graus), saturação e luminosidade. Corresponde ao jeito como as pessoas de fato pensam ao ajustar uma cor.
Onde o HSL compensa
Digamos que você precise do estado hover de um botão. Em HEX não há jeito óbvio de escurecer um pouco #3E6FF4: você mexe nos dígitos e compara no olho. Em HSL, basta baixar a luminosidade em 10. Matiz e saturação continuam iguais, então as duas cores claramente pertencem à mesma família.
O mesmo truque monta paletas. Fixe o matiz e escalone a luminosidade para uma rampa de tons; gire o matiz em 120 graus para cores contrastantes equilibradas.
Se você guarda cores em variáveis CSS, manter os canais HSL separados permite deslocar o tema inteiro editando um único número de matiz.
Alfa
Um HEX de oito dígitos como #RRGGBBAA carrega a opacidade nos dois últimos: 80 é mais ou menos 50% e FF é totalmente opaco. Todo navegador atual entende essa forma.
Quando precisar de transparência, use rgba() ou o HEX de oito dígitos — mas lembre que sobrepor uma cor translúcida não é o mesmo que escolher logo uma mais clara. Se o fundo muda, a cor translúcida muda junto.
O que esta ferramenta lê
Ela aceita HEX de três, quatro, seis e oito dígitos, rgb() e rgba(), hsl() e hsla(), tanto na sintaxe antiga com vírgulas quanto na moderna com espaços.
Cores com nome como red ou rebeccapurple não são interpretadas, e tampouco espaços mais novos como oklch(). Para uma cor com nome, leia o valor HEX nas ferramentas do navegador e cole esse.