{ }JSONKit.tools

Conversor de cores — HEX, RGB, HSL

Cole uma cor em qualquer uma das três notações e receba as outras, com alfa incluso, e uma amostra para ver o que você está convertendo.

Cor

Notações

Aguardando a entrada…

Sobre esta ferramenta

Hex é o que uma ferramenta de design entrega, rgb() é o que um canvas ou uma biblioteca de imagem quer, e hsl() é o que se usa quando a cor precisa ficar um pouco mais clara ou o matiz precisa girar. Converter entre eles na mão é uma aritmética que ninguém aprecia. Cole qualquer uma das três — com ou sem alfa — e as outras aparecem, junto com uma amostra, porque um valor sozinho é fácil de digitar errado e difícil de conferir.

Como usar

  1. 1Cole uma cor: #3fb984, rgb(63 185 132) ou hsl(157, 49%, 49%).
  2. 2Leia as outras notações à direita e confira a amostra acima delas.
  3. 3Copie a linha que você precisa, ou a propriedade personalizada CSS já pronta.

Perguntas frequentes

›Quais notações eu posso colar?

Hex de 3, 4, 6 ou 8 dígitos (#3fb, #3fb9, #3fb984, #3fb984cc), rgb() e rgba(), e hsl() e hsla(). Tanto a sintaxe com vírgulas quanto a moderna com espaços e uma barra antes do alfa são aceitas.

›Por que o HSL volta com decimais?

Porque matiz, saturação e luminosidade são contínuos, enquanto o hex tem 8 bits por canal. Converter hex para HSL raramente cai em números inteiros, e arredondar deslocaria levemente a cor na volta.

›Para que serve o quarto par hexadecimal?

Alfa. #3fb984cc é a mesma cor com 80% de opacidade. Já é suportado em todo lugar que importa, e é mais curto do que trocar para rgba().

›Cores com nome como «tomato» são suportadas?

Não. Resolver as 148 palavras-chave do CSS exige a tabela inteira para um benefício muito pequeno — cole o valor hex em vez disso. Qualquer painel de ferramentas do navegador te dá.

›Por que os designers ficam falando de OKLCH?

Porque a luminosidade do HSL não corresponde à luminosidade percebida: duas cores com o mesmo L podem parecer muito diferentes. O OKLCH resolve isso, o que o torna bem melhor para montar paletas. Esta página fica com as três notações que você cola no dia a dia.