Conversor de Cores

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.

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.

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.

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.