Entender os formatos de cor: HEX, RGB, HSL e além
O que este conversor faz
Uma mesma cor pode ser escrita de várias formas, e esta ferramenta a traduz para seis delas de uma vez. Digite um valor em HEX, RGB ou HSL — ou escolha com o seletor visual — e veja na hora o equivalente em HEX, RGB, HSL, HSV, CMYK e LAB. Os controles deslizantes de HSL permitem ajustar o matiz, a saturação e a luminosidade enquanto todos os outros formatos acompanham a mudança.
Como os seis formatos derivam da mesma cor, e não de uma tabela fixa, mexer no seletor ou num controle recalcula o conjunto inteiro em tempo real, de modo que o que você copia sempre corresponde à amostra exata que aparece na tela.
Quando usar cada formato
Cada tarefa pede uma notação diferente. HEX e RGB são os que você cola no CSS e na maioria das ferramentas de design; HSL é mais fácil de raciocinar quando você quer uma versão um pouco mais escura ou menos saturada de uma cor; CMYK entra em cena quando o trabalho vai para a impressão; e LAB é útil quando você precisa de cores que o olho humano perceba a distâncias regulares. Ter os seis lado a lado significa pegar o que a tarefa à sua frente espera, sem procurar um segundo conversor. Esses valores raramente ficam sozinhos: uma string rgba() é exatamente o que o gerador de sombras CSS precisa para uma sombra suave, e um único código HEX é o que a tag theme-color do gerador de meta tags usa para tingir a barra de endereços do navegador.
Exemplo: converter #FF5733
Pegue o laranja #FF5733. Em RGB é rgb(255, 87, 51): vermelho no máximo, um pouco de verde e menos azul. Em HSL fica por volta de hsl(11, 100%, 60%), um matiz perto da ponta vermelha da roda de cores, totalmente saturado, com 60% de luminosidade. Para a impressão, aproxima-se de cmyk(0%, 66%, 80%, 0%). Cada notação aponta para a mesma amostra; apenas a descreve com números diferentes, e o botão de copiar ao lado de cada valor o leva direto para o seu código ou arquivo de design.
Notas de formato e casos limite
HEX e RGB carregam a mesma informação — #FF5733 e rgb(255, 87, 51) são a mesma cor com outra roupagem — então converter entre eles não perde nada. HSL e HSV, por outro lado, reorganizam essa informação em torno da intuição humana, o que os torna mais práticos para ajustar uma cor do que para armazená-la. CMYK é um modelo de impressão com uma gama mais estreita que a da sua tela, por isso seus valores são uma aproximação próxima, não uma correspondência perfeita, enquanto o LAB é independente do dispositivo e perceptualmente uniforme. Os resultados em HEX, RGB e HSL podem ser colados direto no CSS.