Conversor de cores

Um conversor de cores pega um valor de cor e mostra o mesmo tom em todos os outros formatos comuns. Digite ou cole um código HEX, um valor rgb()/rgba() ou hsl()/hsla(), e a ferramenta identifica o formato sozinha, depois lista as strings equivalentes em HEX, RGB, HSL, HSV e CMYK. Uma amostra grande mostra a cor, com um fundo quadriculado atrás quando ela tem transparência, e um seletor nativo do navegador fica sincronizado com o que você digita.

Quais formatos a ferramenta reconhece?

O campo de entrada aceita HEX de 3, 4, 6 ou 8 dígitos (então tanto #f0f quanto #ff00ff funcionam, e as formas de 4 e 8 dígitos carregam um canal alfa), além de rgb()/rgba() e hsl()/hsla() na sintaxe separada por vírgulas e na mais moderna, separada por espaços, como rgb(255 0 0 / 0.5). Seja qual for o valor colado, a ferramenta converte para os outros quatro formatos: HEX, RGB, HSL, HSV e CMYK. HSV e CMYK sempre aparecem como valores opacos, já que nenhum dos dois tem uma forma padrão de expressar transparência, enquanto HEX, RGB e HSL preservam o canal alfa e passam a usar os nomes de função com sufixo a (rgba(), hsla()) sempre que a cor não é totalmente opaca.

Junto com a conversão, a ferramenta também gera uma rampa de dez tons, do mais claro ao mais escuro, mantendo o matiz e a saturação da cor original e variando apenas a luminosidade em passos regulares. É uma forma rápida de tirar uma paleta de tons e sombras de uma única cor de marca sem abrir um programa de design.

Meus dados são enviados para algum servidor?

Não. A análise e a conversão acontecem inteiramente no navegador, com cálculos simples em JavaScript, sem nenhuma chamada a um servidor. A cor que você digita ou escolhe nunca sai da sua máquina, então dá para converter cores de marca de um design system interno ou do guia de estilo de um cliente sem colar nada em um site de terceiros.

Use para transformar o código HEX de um designer nos valores RGB ou HSL que um arquivo CSS precisa, conferir como uma cor fica com opacidade parcial, ou obter as porcentagens CMYK para impressão a partir de uma cor escolhida na tela. Veja a referência do tipo <color> do MDN para a lista completa de notações de cor do CSS, ou a especificação CSS Color Module Level 4 para entender como a sintaxe separada por espaços foi definida.