T
css color oklch web-design frontend

Guia de Funções de Cor Modernas em CSS: OKLCH, color-mix() e além

Domine as funções de cor modernas do CSS como OKLCH, color-mix() e a sintaxe de cor relativa. Saiba por que o OKLCH é superior ao RGB/HSL.

2026-04-18 Usar esta ferramenta

Guia de Funções de Cor Modernas em CSS: OKLCH, color-mix() e além

A forma como definimos as cores na web está passando por uma transformação massiva. Durante décadas, os desenvolvedores confiaram nos códigos rgb() e hex, adotando posteriormente o hsl() para uma melhor leitura humana. No entanto, à medida que a tecnologia dos ecrãs evolui (com HDR e gamas de cores amplas) e a acessibilidade se torna um requisito fundamental, estes modelos antigos mostram as suas limitações.

Entram em cena as novas funções de cor do CSS: OKLCH, color-mix() e a Sintaxe de Cor Relativa. Estas ferramentas não são apenas "novas formas de fazer o mesmo"; elas resolvem problemas fundamentais na teoria da cor e na acessibilidade web.

1. Por que o OKLCH é o novo padrão

Se alguma vez tentou criar uma paleta de cores consistente usando HSL, deve ter notado um problema: diferentes tons com o mesmo valor de luminosidade (lightness) não parecem igualmente brilhantes. Por exemplo, um "azul puro" e um "amarelo puro" com 50% de luminosidade parecem vastamente diferentes para o olho humano.

A Uniformidade Percetiva do OKLCH

OKLCH significa:

  • O: Oklab (o espaço de cor em que se baseia)
  • L: Lightness (luminosidade percetiva)
  • C: Chroma (intensidade ou "quantidade" de cor)
  • H: Hue (matiz, o ângulo na roda de cores)

O "K" em OKLCH refere-se à Uniformidade Percetiva. Isto significa que se mantiver a Luminosidade (L) igual e mudar a Matiz (H), a cor parecerá ter o mesmo brilho para o olho humano.

Exemplo de código:

.button-primary {
  /* Um azul bonito e percetivamente equilibrado */
  background-color: oklch(60% 0.15 250);
}

.button-secondary {
  /* Mudando a matiz enquanto mantém exatamente a mesma luminosidade percetiva */
  background-color: oklch(60% 0.15 20);
}

Benefícios do OKLCH:

  1. Suporte para Gama de Cores P3: Acesso a 50% mais cores do que o sRGB padrão (RGB/HEX).
  2. Sistemas de Design mais Fáceis: Crie temas acessíveis simplesmente ajustando o valor de Luminosidade.
  3. Sem "Efeito Cinza": As cores permanecem vibrantes quando ajustadas, ao contrário do HSL.

2. Mistura de cores dinamicamente com color-mix()

A função color-mix() permite misturar duas cores diretamente no CSS, o que anteriormente exigia um pré-processador como Sass ou uma biblioteca JavaScript.

Sintaxe: color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)

Caso de Uso Prático: Estados Hover

:root {
  --brand-color: #3b82f6;
}

.btn:hover {
  /* Mistura a cor da marca com 20% de branco para um tom perfeito */
  background-color: color-mix(in oklab, var(--brand-color), white 20%);
}

Misturar cores no espaço oklab costuma produzir os resultados mais naturais, evitando as cores "sujas" que muitas vezes se veem nas misturas RGB.

3. Sintaxe de Cor Relativa: O futuro da manipulação de cores

A Sintaxe de Cor Relativa (RCS) é talvez a adição mais poderosa às cores do CSS. Ela permite pegar numa cor existente, decompô-la, modificar os seus componentes e voltar a montá-la.

Exemplo de sintaxe:

.alert {
  --base-color: blue;
  /* Pega em 'blue', mantém matiz e croma, mas define a luminosidade para 90% */
  background-color: oklch(from var(--base-color) 0.9 c h);
  /* Define um canal alfa relativo ao original */
  color: oklch(from var(--base-color) l c h / 0.8);
}

Isto torna efetivamente cada variável de cor CSS numa "fábrica" para as suas próprias variantes (tintas, sombras, versões transparentes) sem a necessidade de dezenas de variáveis separadas.

4. Cores de Gama Ampla (Display-P3)

A maioria dos smartphones e portáteis modernos (como MacBooks e Androids de gama alta) suportam ecrãs de Gama Ampla (Wide Gamut). As cores CSS tradicionais estão limitadas ao espaço sRGB, o que significa que não podem mostrar os verdes, vermelhos e laranjas mais vibrantes que esses ecrãs são capazes de reproduzir.

Usando a função color() com display-p3, pode desbloquear estas cores "HD".

.neon-green {
  /* Este verde é impossível de representar em HEX/RGB padrão */
  color: color(display-p3 0 1 0);
}

5. Melhor Modo Escuro com light-dark()

A nova função light-dark() simplifica a implementação de temas ao escolher automaticamente o valor correto com base nas preferências do sistema do utilizador.

body {
  /* Chega de blocos @media (prefers-color-scheme) complexos para cores simples */
  background-color: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#333333, #efefef);
}

FAQ: Perguntas Frequentes

P: Por que devo usar OKLCH em vez de HSL?

R: O HSL não é percetivamente uniforme. Se mudar a matiz no HSL enquanto mantém a luminosidade em 50%, o brilho parecerá flutuar imenso. O OKLCH corrige isso, tornando muito mais fácil construir sistemas de design acessíveis e componentes de interface consistentes.

P: O OKLCH é suportado em todos os navegadores?

R: A partir de 2024, o OKLCH, color-mix() e a Sintaxe de Cor Relativa são suportados em todos os principais navegadores modernos (Chrome, Firefox, Safari, Edge). Para navegadores antigos, deve fornecer um fallback em HEX.

P: Qual é o melhor espaço de cor para misturar?

R: Para a maioria das tarefas de interface de utilizador, oklab ou oklch são os melhores espaços de interpolação para color-mix(). Eles evitam a "zona morta cinzenta" no meio de um gradiente ou mistura que ocorre frequentemente em sRGB.

Pronto para experimentar?

O CSS moderno está a tornar as ferramentas de design mais poderosas e o código mais fácil de manter. Tente usar o nosso Conversor de Cor para ver como as suas cores de marca ficam em diferentes formatos.

Nota: Atualmente estamos a trabalhar num Seletor de Cores OKLCH dedicado e num Gerador de Sintaxe de Cor Relativa. Fique atento!

Voltar ao blog Conversor de Cores →