Funções de Cor CSS: rgb(), hsl(), oklch() Comparadas

O CSS tem mais formas de escrever uma cor do que a maioria dos desenvolvedores imagina. Além do ubíquo código hex, existem pelo menos oito funções de cor distintas — e cada uma tem um modelo diferente, pontos fortes diferentes e razões diferentes para escolhê-la. Escolher a certa não é apenas uma preferência de sintaxe; pode determinar se suas cores são acessíveis, se elas interpolam corretamente em animações e se você consegue gerar escalas de cores programáticas com aparência visualmente consistente.

Este guia aborda todas as principais funções de cor CSS, quando cada uma brilha e como está o suporte nos navegadores em 2026.

rgb() e rgba()

A função rgb() é a expressão CSS direta do modelo de cores RGB: três números de 0 a 255, um para cada canal de Vermelho (Red), Verde (Green) e Azul (Blue).

color: rgb(59, 130, 246);     /* Um azul vívido */
color: rgb(255, 87, 51);      /* Um coral avermelhado quente */
color: rgb(0, 0, 0);          /* Preto */
color: rgb(255, 255, 255);    /* Branco */

rgba() é a forma histórica para adicionar opacidade, com um quarto argumento de 0 (transparente) a 1 (opaco):

color: rgba(59, 130, 246, 0.5);   /* Mesmo azul a 50% de opacidade */

Sintaxe Moderna de rgb()

No CSS Color Level 4 (totalmente suportado em todos os navegadores modernos desde 2023), rgb() foi atualizado para aceitar o canal alfa diretamente, tornando rgba() redundante:

/* Estes agora são equivalentes */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

A nova sintaxe com separação por espaço e uma barra antes do valor alfa funciona com rgb(), hsl() e outras funções. Ambas as formas funcionam — você verá as duas em bases de código existentes.

Quando Usar rgb()

rgb() é mais útil quando: - Você está trabalhando a partir de uma cor hex e quer os valores brutos dos canais visíveis - Você precisa animar canais individuais R, G ou B por meio de propriedades personalizadas CSS - Você está gerando cores programaticamente e os dados de origem já estão em RGB

Sua fraqueza é que a intuição humana não se mapeia bem para o RGB. É difícil olhar para rgb(107, 142, 35) e saber que você obterá verde oliva. Para trabalho de design, HSL ou OKLCH são mais intuitivos.

hsl() e hsla()

HSL significa Hue (Matiz), Saturation (Saturação), Lightness (Luminosidade). Ele mapeia as cores para um cilindro em vez de um cubo, o que está muito mais próximo de como designers realmente pensam sobre cor.

• Matiz: um grau na roda de cores de 0 a 360 (0 = vermelho, 120 = verde, 240 = azul)
• Saturação: 0% (cinza, sem cor) a 100% (totalmente vívido)
• Luminosidade: 0% (preto) a 100% (branco), com 50% sendo a cor "pura"

color: hsl(217, 91%, 60%);    /* Um azul vívido */
color: hsl(9, 100%, 60%);     /* Um coral avermelhado quente */
color: hsl(80, 60%, 35%);     /* Verde oliva */
color: hsl(0, 0%, 50%);       /* Cinza médio puro */

hsla() adiciona o canal alfa, idêntico ao padrão rgb() / rgba():

color: hsla(217, 91%, 60%, 0.5);  /* Azul a 50% de opacidade */
color: hsl(217 91% 60% / 0.5);   /* O mesmo, usando a sintaxe moderna */

Por que hsl() Mudou o Desenvolvimento Web

Antes de hsl() chegar ao CSS 2.1 (2011), alterar a luminosidade ou saturação de uma cor em CSS exigia voltar a um código hex ou valores RGB e recalcular do zero. Com hsl(), você pode criar variações consistentes de uma cor de forma trivial:

:root {
  --blue-h: 217;
  --blue-s: 91%;
}

.btn {
  background: hsl(var(--blue-h), var(--blue-s), 60%);    /* Base */
}
.btn:hover {
  background: hsl(var(--blue-h), var(--blue-s), 50%);    /* Mais escuro no hover */
}
.btn:active {
  background: hsl(var(--blue-h), var(--blue-s), 40%);    /* Ainda mais escuro */
}

O Problema com hsl()

Apesar de seu apelo intuitivo, o HSL tem uma falha fundamental: não é perceptualmente uniforme. Passos numéricos iguais em HSL não produzem cores que pareçam igualmente diferentes ao olho humano.

O sintoma mais óbvio é o amarelo. Um amarelo HSL puro (hsl(60, 100%, 50%)) parece muito mais brilhante e intenso do que um azul HSL puro (hsl(240, 100%, 50%)), mesmo que ambos tenham os mesmos valores de saturação e luminosidade. Isso dificulta a criação de escalas de cores onde matizes diferentes pareçam visualmente equilibrados.

Por essa razão, o trabalho moderno de cores CSS está cada vez mais migrando para o OKLCH.

lab() e lch()

O CSS Color Level 4 introduziu lab() e lch() baseados no espaço de cores CIE L*a*b*, projetado por cientistas de cores para ser perceptualmente uniforme — diferenças numéricas iguais correspondem a diferenças perceptuais iguais na cor.

lab()

lab() usa três eixos: - L: Luminosidade de 0 (preto) a 100 (branco) - a: Posição no eixo verde-vermelho (negativo = verde, positivo = vermelho) - b: Posição no eixo azul-amarelo (negativo = azul, positivo = amarelo)

color: lab(53 -5 -60);    /* Um azul vívido */
color: lab(55 60 40);     /* Um laranja-avermelhado quente */
color: lab(80 -15 20);    /* Oliva/limão suave */

Os eixos a e b são menos intuitivos do que graus de matiz, o que torna lab() um tanto difícil de escrever manualmente. É mais útil programaticamente — por exemplo, ao calcular gradientes perceptualmente uniformes ou razões de contraste.

lch()

lch() é uma reimaginação cilíndrica do Lab usando Luminosidade, Croma (semelhante à saturação) e Matiz:

color: lch(53 60 265);    /* Azul vívido (L=53, C=60, H=265°) */
color: lch(60 55 25);     /* Laranja-avermelhado quente */

O matiz em lch() se mapeia aproximadamente (mas não de forma idêntica) ao matiz em hsl(). A diferença fundamental é que luminosidade e croma em lch() são perceptualmente significativas — duas cores em lch(70 40 X) parecerão igualmente brilhantes, independentemente de seu matiz, o que não é verdade em hsl().

Quando Usar lab() e lch()

Essas funções são excelentes para: - Gerar pares de cores acessíveis onde o contraste percebido é previsível - Criar paletas de visualização de dados onde as cores pareçam igualmente ponderadas - Criar gradientes suaves e de aparência natural

Elas foram substituídas para a maioria dos novos trabalhos por oklch(), que é mais preciso e tem melhor suporte de ferramentas.

oklch()

O OKLCH é o estado da arte atual para especificação de cores em CSS. Ele é baseado no espaço de cores Oklab, desenvolvido por Björn Ottosson em 2020, que melhora o CIE Lab com melhor uniformidade perceptual — especialmente para matizes azuis e roxos, que o CIE Lab trata mal.

A função recebe três valores mais um alfa opcional:

• L: Luminosidade de 0 (preto) a 1 (branco)
• C: Croma (intensidade de cor), tipicamente de 0 a 0,4
• H: Ângulo de matiz em graus, de 0 a 360

color: oklch(0.62 0.19 250);    /* Azul vívido */
color: oklch(0.65 0.22 25);     /* Laranja-avermelhado quente */
color: oklch(0.85 0.08 130);    /* Verde suave */
color: oklch(0.62 0.19 250 / 0.5); /* Azul a 50% de opacidade */

Por que oklch() É Importante

Luminosidade previsível. Como a luminosidade OKLCH é perceptualmente uniforme, duas cores com o mesmo valor L parecem igualmente brilhantes, independentemente do matiz. Isso torna simples criar paletas de cores onde todos os matizes pareçam equilibrados:

/* Todos estes parecem igualmente "de peso médio" em OKLCH */
--red:    oklch(0.65 0.25 15);
--green:  oklch(0.65 0.18 145);
--blue:   oklch(0.65 0.19 250);
--yellow: oklch(0.65 0.15 90);

Tente alcançar isso com hsl() — o amarelo parecerá nitidamente mais brilhante do que o azul.

Acesso a gama ampla. O OKLCH pode expressar cores fora da gama sRGB, dando acesso às cores vívidas disponíveis em displays modernos (iPhone, MacBook Pro, maioria dos laptops de 2023+) que suportam Display P3 ou mais amplo. Códigos hex e rgb() estão limitados ao sRGB:

/* Este verde vívido só é possível com oklch — fora do sRGB */
color: oklch(0.72 0.30 145);

Os navegadores mapeiam automaticamente as cores OKLCH fora de gama para a cor disponível mais próxima para displays que não conseguem exibi-las, portanto é seguro usar cores de gama ampla agora.

Melhor interpolação de gradiente. As cores interpoladas (animadas ou em gradiente) em OKLCH passam por cores intermediárias perceptualmente corretas. O infame "meio cinzento e baçante" que aparece em gradientes RGB entre cores complementares não ocorre em OKLCH.

oklch() em Sistemas de Design

Um número crescente de sistemas de design e frameworks CSS está adotando OKLCH para suas escalas de cores. Se você está construindo um sistema de design do zero em 2025 ou depois, o OKLCH é o ponto de partida recomendado. Use o Conversor de Cores para traduzir qualquer código hex existente em seu equivalente OKLCH.

color-mix()

color-mix() é uma função CSS mais recente que mistura duas cores em um espaço de cores especificado e na proporção definida:

/* Misturar azul e vermelho igualmente em oklch */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* Criar uma tinta mais clara: misturar com branco */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

/* Criar uma sombra mais escura: misturar com preto */
color: color-mix(in oklch, oklch(0.62 0.19 250) 70%, black);

O in oklch (ou in srgb, in hsl, etc.) especifica o espaço de cores usado no cálculo de mistura, o que afeta significativamente o resultado.

Por que o Espaço de Cores Importa para a Mistura

Misturar em sRGB frequentemente produz pontos médios apagados e dessaturados entre cores complementares. Misturar em OKLCH produz cores intermediárias perceptualmente vívidas — porque a interpolação em OKLCH segue o mesmo caminho que a percepção humana de cores percorre.

/* Misturar azul e amarelo em sRGB frequentemente produz um oliva/cinza apagado */
color: color-mix(in srgb, blue, yellow);

/* Misturar em oklch produz um verde intermediário vívido */
color: color-mix(in oklch, blue, yellow);

Casos de Uso Práticos para color-mix()

Gerando variantes de tema. Em vez de codificar rigidamente cinco variantes de sombra da sua cor de marca, gere-as dinamicamente:

:root {
  --brand: oklch(0.55 0.22 250);
  --brand-light: color-mix(in oklch, var(--brand) 50%, white);
  --brand-lighter: color-mix(in oklch, var(--brand) 25%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

Adaptação ao modo escuro. Derive automaticamente cores de superfície para modo escuro misturando com uma base escura:

@media (prefers-color-scheme: dark) {
  --surface: color-mix(in oklch, var(--brand) 15%, #121212);
}

Opacidade sem transparência real. Misturar uma cor com branco ou uma cor de fundo específica simula opacidade sem compor camadas:

/* Simula rgba(59, 130, 246, 0.2) sobre fundo branco */
color: color-mix(in srgb, #3B82F6 20%, white);

Suporte nos Navegadores em 2026

No início de 2026, oklch() e color-mix() são suportados em todos os principais navegadores atuais. A principal preocupação são usuários em navegadores móveis mais antigos ou ambientes corporativos com políticas de navegador desatualizadas. Para trabalho de produção onde a compatibilidade máxima importa, forneça um fallback hex ou rgb() antes da sintaxe moderna:

.element {
  /* Fallback para navegadores mais antigos */
  color: #3B82F6;
  /* Aprimoramento progressivo */
  color: oklch(0.62 0.19 250);
}

Escolhendo a Função de Cor CSS Correta

Principais Conclusões

• rgb() e hsl() são os padrões estabelecidos com suporte universal de navegadores. A sintaxe moderna separada por espaço (rgb(R G B / alpha)) torna rgba() e hsla() redundantes.
• hsl() é mais intuitivo do que rgb() para trabalho de design, mas não é perceptualmente uniforme — passos numéricos iguais produzem mudanças perceptuais desiguais, especialmente entre matizes.
• lab() e lch() introduziram uniformidade perceptual no CSS, mas foram amplamente substituídos pelo oklch() mais preciso.
• oklch() é o padrão moderno: perceptualmente uniforme, capaz de gama ampla e excelente para gradientes, animações e escalas de cores em sistemas de design.
• color-mix() permite a geração dinâmica de cores diretamente em CSS — útil para temas, tintes, sombras e adaptação ao modo escuro.
• Use o Conversor de Cores para traduzir qualquer código hex existente para oklch() ou qualquer outro formato.
• Forneça valores hex ou rgb() de fallback antes de oklch() ou color-mix() para máxima compatibilidade com navegadores.