Conversor de hex para OKLCH

O que é oklch()?

oklch() é o jeito do CSS Color 4 de escrever uma cor, e a nomeia por três números com que dá para raciocinar: a luminosidade em porcentagem, o croma — o quanto ela é colorida — e a matiz como um ângulo em graus. oklch(62,8% 0,258 29,2) é o vermelho que você conhece como #ff0000.

Vale a troca principalmente por um motivo: a luminosidade é perceptual. Duas cores com o mesmo L parecem igualmente claras, o que não acontece nem de longe no HSL — hsl(60 100% 50%) é um amarelo ofuscante e hsl(240 100% 50%) é um azul escuro, com a mesma luminosidade declarada. Por isso uma paleta feita variando o L em OKLCH sai uniforme e a mesma paleta em HSL não sai.

O problema é que um valor hex são três números inteiros e um valor oklch() são três decimais, então escrevê-lo significa decidir quantos dígitos manter. Essa decisão é invisível, não aparece rotulada em nenhum conversor que encontramos, e é justamente onde a cor muda sem avisar.

Como usar

1. Digite ou cole em qualquer um dos campos. Hex à esquerda, oklch() à direita; um move o outro. O campo de oklch() aceita o que o CSS aceita, inclusive croma em porcentagem e a palavra-chave none.
2. Escolha quantos dígitos quer. Três ajustes: o que se escreve à mão, um dígito a mais em cada componente e os números redondos que ficam bonitos. O valor se atualiza e os dados abaixo também.
3. Olhe a linha da ida e volta antes de copiar. Ela diz se aquele texto exato volta a virar o hex de onde você partiu, e por quantas unidades de 255 erra se não voltar.

Quantos dígitos são precisos

Esta é a medição sobre a qual a página foi construída. Pegando 1.893.376 cores sRGB — todos os vermelhos e um a cada três verdes e azuis —, convertendo cada uma para oklch(), arredondando do jeito que seria escrita e voltando:

Na precisão que se escreve à mão — luminosidade com uma casa de porcentagem, croma com três, matiz com uma — voltam exatas 77,91 por cento, e o pior caso erra 8 num canal. Um dígito a mais em cada componente leva isso a 99,92 por cento, com pior caso de 1. E a versão bonitinha, porcentagem e matiz inteiras com duas casas de croma, sobrevive 1,66 por cento e pode errar 43 num canal: uma cor visivelmente diferente.

Para comparar, a mesma ida e volta pelo HSL que toda ferramenta de cor imprime sobrevive 10,58 por cento, que é o número publicado na nossa página de hex para HSL. Ou seja, oklch() na precisão comum é cerca de sete vezes mais fiel do que a notação que ele substitui, e não menos — vale saber, porque as casas decimais o fazem parecer mais chato do que é.

A regra prática que sai daí: duas casas na porcentagem, quatro no croma e duas na matiz é praticamente sem perdas, e custa três caracteres.

Limites honestos

oklch() consegue nomear cores que a sua tela não mostra, o que o hex não consegue. O croma não tem teto fixo na sintaxe, e a maioria dos valores que dá para escrever fica fora do sRGB. Quando isso acontece, o CSS reduz o croma até a cor caber, mantendo luminosidade e matiz — ele não corta os canais vermelho, verde e azul separadamente, porque cortar gira a matiz de forma visível. Esta página faz o mesmo e avisa quando precisou, e quanto croma foi embora.

Tudo aqui é medido contra o sRGB. Uma tela de gama ampla mostra mais, e um navegador numa dessas vai renderizar perfeitamente um oklch() que esta página chama de não exibível. De dentro de uma página não há como perguntar com precisão qual gama você está olhando, então mostra-se a resposta conservadora.

A conversão usa as matrizes padrão do Oklab, e não é aritmética exata: é ponto flutuante passando por uma raiz cúbica e voltando. Os erros ficam bem abaixo de uma unidade em 255, e é por isso que os números acima são dominados pelo arredondamento que você escolhe, não pela conversão.

Por fim, o suporte a oklch() nos navegadores é amplo mas não universal, e o padrão sensato continua sendo declarar o hex e depois o oklch(), para os navegadores antigos ficarem com o primeiro e os novos com o segundo. O hex que esta página dá é exatamente esse fallback.

Por que é grátis?

A conversão roda no seu navegador, em poucas linhas de aritmética. Não há servidor envolvido, então não há o que cobrar nem cadastro a fazer.

Nada é enviado e nada é guardado. Recarregue a página e ela terá esquecido a sua cor.