OKLCH explicado: o formato de cor que finalmente corresponde ao que você vê

O que é OKLCH

OKLCH é a forma polar do Oklab, um espaço de cor perceptual publicado por Björn Ottosson em 2020. Ele tem três números. L é a luminosidade percebida, de 0 (preto) a 1 ou 100% (branco). C é o croma, a quantidade de cor, de 0 (cinza) até cerca de 0,37 nas cores mais vivas que uma tela consegue mostrar. H é o ângulo do matiz, de 0 a 360 graus.

A mesma cor escrita em formatos diferentes fica assim. Todos os valores abaixo são calculados em tempo real pelo PickShade, então você pode copiá-los do jeito que estão.

Por que OKLCH é melhor que HSL

A luminosidade do HSL é uma fórmula, não uma percepção. hsl(60 100% 50%) é um amarelo vivo e hsl(240 100% 50%) é um azul escuro, mas os dois dizem ter 50% de luminosidade. Monte uma paleta em HSL e cada matiz vai precisar de ajuste manual.

No OKLCH, cores com o mesmo L parecem igualmente claras. Você pode manter L e C e girar H para obter um conjunto de matizes equilibrados, ou manter H e C e variar L para obter uma escala de tons limpa. É por isso que o Tailwind CSS v4 define toda a paleta padrão em OKLCH.

A luminosidade também prevê o contraste. Um texto com diferença de L de aproximadamente 0,4 ou mais em relação ao fundo costuma ser legível, o que facilita muito pensar em escolhas de cor acessíveis.

Sintaxe no CSS

A luminosidade pode ser escrita como porcentagem ou como número de 0 a 1. O croma é um número. O matiz é um ângulo em graus. A transparência vem depois de uma barra.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Suporte nos navegadores

oklch() funciona em todos os navegadores atuais: Safari desde a versão 15.4, Chrome e Edge desde a 111, Firefox desde a 113. Isso cobre bem mais de 90% dos usuários. Para navegadores muito antigos, coloque um fallback em HEX na linha anterior ao valor OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Limites de croma e gamut

OKLCH consegue descrever cores que nenhuma tela mostra. O croma máximo depende da luminosidade e do matiz: um amarelo vivo só é possível com luminosidade alta, um azul vivo só com luminosidade baixa. Quando um valor fica fora do gamut sRGB ou Display P3, o navegador o traz de volta para dentro, o que pode alterar a cor.

O PickShade marca as cores fora do sRGB e mostra a cor mais próxima que cabe, encontrada reduzindo o croma e mantendo a luminosidade e o matiz, o mesmo método que o CSS Color 4 recomenda.

Como converter HEX para OKLCH

A conversão vai de HEX para sRGB, de sRGB para luz linear, de sRGB linear para o espaço de cones LMS, passa por uma raiz cúbica, por uma matriz até o Oklab e, por fim, do Oklab para coordenadas polares. Fazer isso à mão é fácil de errar, então cole qualquer cor no conversor e copie o resultado.

Perguntas e respostas