O CSS recebeu nos últimos anos novas funções para trabalhar com cores, ampliando as opções além dos tradicionais RGB e HSL. Uma dessas funções é o oklch(), que implementa o modelo de cores OKLCH.
Neste artigo, vamos explorar o que é o oklch(), como ele funciona e como se diferencia de outros modelos de cor no CSS.
O que é o modelo OKLCH?
OKLCH é um modelo de cores desenvolvido por Björn Ottosson como uma evolução do espaço de cores OKLab. O nome é um acrônimo:
- O — OK (referência ao espaço OKLab)
- L — Lightness (luminosidade)
- C — Chroma (croma ou saturação)
- H — Hue (matiz)
Diferente do HSL (Hue, Saturation, Lightness), o OKLCH foi projetado para ser perceptualmente uniforme. Isso significa que uma mesma variação numérica em qualquer ponto do espaço de cores produz uma variação visualmente percebida de forma semelhante.
Sintaxe da função oklch() no CSS
A função oklch() recebe três parâmetros principais:
/* Sintaxe básica */
oklch(L C H)
/* Exemplos */
color: oklch(50% 0.2 280); /* roxo */
color: oklch(70% 0.15 250); /* azul claro */
color: oklch(30% 0.1 30); /* laranja escuro */Parâmetros
- Luminosidade (L): Valor percentual de 0% a 100%.
- Croma (C): Mede a intensidade da cor.
- Matiz (H): Ângulo entre 0° e 360° no círculo cromático.
Comparação entre modelos de cores
RGB
O modelo RGB é baseado em hardware e representa as cores utilizando a combinação das luzes vermelha, verde e azul. Apesar de ser o padrão para telas, não é o modelo mais intuitivo para criar paletas.
HSL
O HSL facilita a manipulação das cores ao separar matiz, saturação e luminosidade. Entretanto, alterações iguais nesses valores nem sempre produzem mudanças visuais proporcionais.
OKLCH
O OKLCH resolve esse problema oferecendo um espaço de cores perceptualmente uniforme, tornando ajustes de luminosidade e saturação muito mais previsíveis.
Exemplo visual
HSL
A cor perde saturação ao clarear.
OKLCH
A cor mantém identidade visual mesmo aumentando a luminosidade.
OKLCH
Apenas o croma varia, preservando matiz e luminosidade.
Quando usar oklch()
O principal benefício do OKLCH é oferecer previsibilidade durante a criação de interfaces. Como a luminosidade é perceptualmente uniforme, pequenas alterações produzem resultados muito mais consistentes do que em HSL.
Isso torna o modelo especialmente útil em sistemas de design modernos, onde uma mesma cor precisa gerar dezenas de variações mantendo identidade visual.
- Design Systems: Criação de escalas de cores consistentes para componentes e tokens.
- Acessibilidade: Ajuste fino de contraste mantendo a identidade visual da marca.
- Dark Mode: Geração de temas claros e escuros preservando a percepção das cores.
- Interfaces modernas: Estados de hover, active, disabled e feedback visual mais naturais.
Compatibilidade com navegadores
Atualmente o oklch() possui suporte nos principais navegadores modernos.
- Chrome 111+
- Edge 111+
- Firefox 113+
- Safari 16.4+
Caso seja necessário oferecer compatibilidade com navegadores antigos, utilize um fallback declarando primeiro uma cor em hexadecimal ou RGB.
/* Fallback */
color: #8b5cf6;
color: oklch(55% 0.2 280);Ferramenta relacionada
Quer trabalhar com oklch() de forma prática? Utilize nosso Seletor de Cores, onde é possível converter formatos, visualizar harmonias, explorar escalas e copiar valores em HEX, RGB, HSL e OKLCH.
Seletor de Cores
Selecione e explore cores com todos os formatos.
Conclusão
O oklch() representa uma evolução importante na forma como o CSS trabalha com cores. Ao utilizar um modelo perceptualmente uniforme, ele permite criar interfaces mais consistentes, acessíveis e previsíveis, reduzindo o esforço necessário para construir escalas de cores e sistemas de design.
Embora modelos como HEX, RGB e HSL continuem sendo amplamente utilizados, o OKLCH vem se tornando a escolha preferida em projetos modernos devido ao seu comportamento visual mais natural.
Se você trabalha com interfaces, design systems, acessibilidade ou desenvolvimento front-end, vale a pena começar a incorporar o oklch() ao seu fluxo de trabalho e aproveitar seus benefícios desde o início do projeto.