O que é a cor OKLCH

• OKLCH é um modelo de cor moderno ajustado à percepção visual humana, com a característica de que as mudanças de brilho, saturação e matiz entre cores são percebidas de forma uniforme, sendo um modelo de cor perceptualmente uniforme
• Sua estrutura é composta por Lightness (luminosidade), Chroma (croma/saturação), Hue (matiz), e em comparação com modelos anteriores permite montar paletas de cores mais consistentes
• Mantendo o mesmo brilho e croma e alterando apenas o Hue, é possível criar uma paleta uniforme, o que é vantajoso para design de UI
• Em comparação com sRGB/HSL, oferece mudanças de contraste mais previsíveis e gradientes mais uniformes, embora em alguns casos possa gerar cores não intencionais
• Em displays modernos como o Display-P3, permite uma representação de cores mais ampla e, nos navegadores recentes, é suportado via CSS Color 4, além de oferecer fallback para sRGB, consolidando-se gradualmente como padrão da web

---

Introdução ao modelo de cor OKLCH

• OKLCH é um modelo de cor moderno desenvolvido com foco em uniformidade perceptual (perceptually uniform)
• Esse modelo funciona de forma mais próxima de como as pessoas realmente percebem as cores, tornando muito mais prático trabalhar com cores em design digital e desenvolvimento frontend

Conceitos básicos de modelos de cor

• Um modelo de cor é um sistema que define e representa cores matematicamente
• Exemplos de modelos comumente usados: RGB, HSL, LCH, OKLCH, LAB, XYZ
• Cada modelo determina a facilidade de representar e manipular cores

Exemplos de notação de cores

• oklch(0.55 0.18 260)
• hsl(220 100% 50%)
• rgb(0, 128, 255)
• lch(60% 60 260)
• lab(50 -10 -50)
• color(xyz 0.18 0.19 0.6)
• #1E90FF

Gamut (faixa do espaço de cor)

• Gamut significa a faixa total de cores que um determinado modelo de cor consegue representar
• Gamuts representativos: sRGB (padrão da web), Display-P3 (suportado por dispositivos modernos)
• Além da faixa de gamut, um espaço de cor também possui várias outras propriedades, como white point e transfer function

Estrutura do OKLCH

Tanto o OKLCH quanto o LCH são compostos por três valores: Lightness, Chroma, Hue
O OKLCH é baseado no espaço de cor OKLab

• Lightness (claridade/luminosidade): expresso de 0 a 1 ou de 0% a 100%, garantindo mudanças uniformes de brilho
• Chroma (croma/saturação): intensidade da cor, semelhante à Saturation (saturação) do HSL
• Hue (matiz): representa a cor em um ângulo de 0 a 360 graus

Vantagens e usos do OKLCH

• Brilho consistente

  • No OKLCH, ao definir cores com o mesmo brilho e croma e apenas um hue diferente, todas as cores tendem a ser percebidas com brilho semelhante
  • Em sRGB ou HSL tradicionais, brilho e saturação podem parecer inconsistentes dependendo da cor
  • Por isso, o OKLCH facilita a criação de paletas de cores perceptualmente uniformes

• Etapas previsíveis de luminosidade da cor

  • No OKLCH, ao alterar o brilho, é possível gerar vários níveis de cor sem mudar o hue (matiz) ou o chroma (croma)
  • Em HSL e similares, ao mudar o brilho pode ocorrer um efeito de deriva de matiz
  • Com OKLCH, é possível criar etapas consistentes de luminosidade ajustando apenas o brilho

• Forma de lidar com gradientes (Gradients)

  • No sRGB, a interpolação ocorre entre os valores de vermelho, verde e azul, então o ponto intermediário pode ficar opaco ou apresentar grande variação de brilho
  • O OKLCH faz a interpolação ao longo dos eixos Lightness, Chroma e Hue, permitindo gradientes mais naturais
  • Porém, como o Hue tem estrutura circular, podem surgir variações inesperadas de cor
  • Para evitar isso, é possível fazer interpolação linear no OKLab, obtendo resultados mais previsíveis

Suporte a espaços de cor

• O sRGB não consegue cobrir parte do amplo espaço de cor exibido por displays modernos
• Com OKLCH, é possível representar cores mais vivas em dispositivos que suportam gamas amplas, como Display-P3
• Em dispositivos que suportam apenas sRGB, as cores são mapeadas para as mais semelhantes possíveis

Valor máximo de Chroma (saturação)

• O OKLCH permite definir matematicamente até mesmo cores fora da faixa que uma tela real consegue exibir
• Por exemplo, um valor de chroma muito alto como oklch(0.7 0.4 40) não pode ser exibido na prática e será recortado para uma cor próxima
• É importante entender o conceito de chroma máximo e ajustar os valores adequadamente conforme o matiz, o brilho e o espaço de cor escolhido (sRGB, Display-P3)

Suporte dos navegadores e fallback

• As cores OKLCH foram introduzidas no CSS Color Module Level 4 e já são suportadas pela maioria dos navegadores modernos
• Em navegadores antigos, o suporte pode não existir, então é possível definir valores de fallback usando a diretiva CSS @supports

  @layer base {  
    :root {  
      /* sRGB hex */  
      --color-gray-100: #fcfcfc;  
      --color-gray-200: #fafafa;  
      --color-gray-300: #f4f4f4;  
  
      @supports (color: oklch(0 0 0)) {  
        /* OKLCH */  
        --color-gray-100: oklch(0.991 0 0);  
        --color-gray-200: oklch(0.982 0 0);  
        --color-gray-300: oklch(0.955 0 0);  
      }  
    }  
  }  
  

• Em navegadores compatíveis, aplica-se OKLCH; nos não compatíveis, aplicam-se cores sRGB (hex)

Ferramenta oklch.fyi

• oklch.fyi é uma ferramenta web que oferece recursos relacionados a OKLCH, como geração de paletas de cores e conversão de variáveis CSS
• Ela ajuda a usar cores OKLCH com mais facilidade em sistemas de design, desenvolvimento de temas e outros contextos