🎨
← Voltar aos guias

Funções de Cores CSS Modernas: rgba(), hsl(), oklch() e Além

· Tags: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Funções de Cores CSS Modernas: rgba(), hsl(), oklch() e Além

As funções de cores CSS evoluíram dramaticamente. O que antes era uma escolha entre hex, rgb() e hsl() agora é um rico ecossistema de espaços de cores e funções de manipulação que dão aos desenvolvedores um controle sem precedentes sobre representação, interpolação e acessibilidade de cores.

Este guia cobre todas as principais funções de cores CSS disponíveis em 2026, das familiares às mais avançadas.

RGB e RGBA: Os Cavalos de Batalha

A função rgb() define cores usando o modelo de cores aditivo vermelho-verde-azul. Ela faz parte do CSS desde o CSS1 e é suportada em todos os navegadores já criados.

/* Sintaxe legada separada por vírgulas */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Sintaxe moderna separada por espaços (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Valores percentuais */
color: rgb(100% 0% 0%);

Principais Mudanças no RGB Moderno

O CSS Color Level 4 introduziu duas melhorias importantes:

  1. Separado por espaços em vez de vírgulas — A função rgb() agora aceita valores separados por espaços ou barras
  2. Sintaxe de alfa unificada — O alias rgba() está obsoleto (mas ainda suportado). rgb() agora aceita nativamente um canal alfa

Essa sintaxe moderna é suportada em todos os navegadores lançados desde 2020. Para projetos novos, use a sintaxe moderna e pule o alias rgba() completamente.

Canais RGB

Cada canal RGB aceita:

  • Um inteiro de 0 a 255
  • Uma porcentagem de 0% a 100%
  • A palavra-chave none para canais ausentes (CSS Color Level 4)

A palavra-chave none é útil ao interpolar cores — ela diz ao navegador para não interpolar aquele canal específico.

HSL e HSLA: Controle Intuitivo de Cores

HSL significa Matiz, Saturação, Luminosidade. Ele usa um sistema de coordenadas cilíndricas que mapeia naturalmente como os humanos pensam sobre cores.

/* H é o ângulo da matiz (0-360), S é a saturação (0-100%), L é a luminosidade (0-100%) */
color: hsl(0 100% 50%);        /* Vermelho puro */
color: hsl(0 100% 50% / 0.5);  /* Vermelho com 50% de opacidade */

/* Ângulos de matiz com unidades */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Referência de Ângulos de Matiz

| Matiz | Cor | Hex | |-----|----------|----------| | 0 | Vermelho | #FF0000 | | 30 | Laranja | #FF8000 | | 60 | Amarelo | #FFFF00 | | 120 | Verde | #00FF00 | | 180 | Ciano | #00FFFF | | 240 | Azul | #0000FF | | 300 | Magenta | #FF00FF |

O HSL é a melhor escolha para gerar paletas de cores programaticamente porque mudar apenas o canal de luminosidade ou saturação cria variantes visuais consistentes.

HWB: Misturando com Branco e Preto

HWB (Matiz, Brancura, Negrura) é uma alternativa mais intuitiva ao HSL. Você escolhe uma matiz e depois adiciona brancura e negrura para criar tons claros e escuros.

color: hwb(0 0% 0%);    /* Vermelho puro */
color: hwb(0 40% 0%);   /* Vermelho com tom claro (branco adicionado) */
color: hwb(0 0% 40%);   /* Vermelho com tom escuro (preto adicionado) */
color: hwb(0 20% 20%);  /* Tom (branco + preto) */

O HWB é mais simples que o HSL para um caso de uso específico: criar variações de tom claro e escuro de uma cor de marca. Você nunca precisa pensar em curvas de saturação — basta adicionar branco ou preto.

Suporte de navegadores: O HWB é suportado em todos os navegadores modernos (Chrome 101+, Firefox 96+, Safari 15+).

LAB e LCH: Espaços Perceptualmente Uniformes

LAB (Luminosidade, Eixo A, Eixo B) e LCH (Luminosidade, Croma, Matiz) são espaços de cores perceptualmente uniformes. Isso significa que a distância euclidiana entre dois valores de cor corresponde à diferença visual percebida — algo que RGB e HSL não conseguem fazer.

color: lab(50% 50 0);        /* Vermelho médio */
color: lch(50% 50 0);        /* Mesma cor em forma cilíndrica */

Por que a uniformidade perceptual importa:

  • Gradientes — Interpolar em LAB ou LCH produz transições suaves e naturais sem a "zona lamacenta" monótona que os gradientes RGB criam
  • Medição de diferença de cor — O Delta E (a medida de diferença perceptual) é significativo no espaço LAB
  • Acessibilidade — A uniformidade perceptual ajuda a prever como as cores serão percebidas por usuários com deficiências de visão de cores

Limitações: LAB e LCH podem produzir cores fora da gama sRGB. Essas cores serão cortadas quando exibidas em telas sRGB, mas são acessíveis em telas de gama mais ampla (DCI-P3, Rec. 2020).

Suporte de navegadores: Suportado no Chrome 111+, Firefox 113+, Safari 15+. Sem suporte para IE ou Edge legado.

OKLAB e OKLCH: Padrão Perceptual Moderno

O OKLCH é uma versão melhorada do LCH desenvolvida por Bjorn Ottosson. Ele corrige as não uniformidades perceptuais do LCH, especialmente para matizes azuis. O OKLCH se tornou o espaço de cores padrão recomendado para novos projetos CSS em 2025-2026.

color: oklch(60% 0.2 30);
/* Luminosidade: 0-100%, Croma: 0-~0.4, Matiz: 0-360 */

Por que o OKLCH é o Melhor Espaço de Cores para CSS

  1. Melhor uniformidade perceptual — Mudanças numéricas iguais produzem mudanças visuais iguais em todas as matizes
  2. Luminosidade previsível — Cores com o mesmo valor de luminosidade realmente parecem igualmente brilhantes
  3. Sem gradientes lamacentos — A interpolação permanece limpa em toda a faixa de matizes
  4. Seguro para sRGB por padrão — A maioria dos valores OKLCH produz cores sRGB dentro da gama
  5. Canais intuitivos — Como o HSL, mas com precisão perceptual real

OKLCH na Prática

/* Criando uma escala de cores equilibrada com OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Observe que cada etapa muda aproximadamente pelo mesmo valor de luminosidade (20 pontos percentuais). Como o OKLCH é perceptualmente uniforme, essas etapas parecem igualmente espaçadas ao olho humano — algo difícil de alcançar com o HSL.

Suporte de navegadores: O OKLCH é suportado no Chrome 111+, Firefox 113+, Safari 15.4+. Ele rapidamente se tornou o espaço de cores moderno mais recomendado.

Color-Mix: Misture Cores em CSS

A função color-mix() mistura duas cores em um espaço de cores especificado:

/* Mistura vermelho e azul igualmente em sRGB */
color: color-mix(in srgb, red, blue);

/* 30% primária, 70% branco — um tom claro */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Misture com espaço de cores perceptual para resultados suaves */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

O parâmetro in <color-space> permite controlar o espaço de interpolação. Na maioria dos casos, in oklch produz os melhores resultados visuais.

Casos de uso:

  • Criar tons claros e escuros sem funções de pré-processador
  • Construir variantes de componentes a partir de um único token de cor
  • Gerar estados de hover e ativo dinamicamente
  • Criar efeitos semelhantes a gradientes em uma única função

Sintaxe de Cores Relativas: Modifique Cores Existentes

O CSS Color Level 4 permite derivar novas cores de cores existentes modificando canais individuais:

--primary: #3366cc;

/* Usando canais OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Usando canais HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

A palavra-chave from <color> descompacta os canais da cor de origem nos canais da função de destino, que você pode então ajustar com aritmética.

Palavras-chave de Canais por Espaço de Cores

Cada espaço de cores expõe palavras-chave específicas de canais:

| Espaço de Cores | Palavras-chave | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Visão Geral do Suporte de Navegadores (2026)

| Função | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Todos | Todos | Todos | Todos | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Sintaxe de cores relativas | 111+ | 113+ | 16.2+ | 111+ |

Todas as funções de cores modernas são seguras de usar em 2026 para projetos que não exigem suporte ao Internet Explorer. Para compatibilidade mais ampla, use uma etapa de build que converta sintaxe moderna para hex ou rgb() legado.

Recomendações Práticas

  • Para projetos existentes — O HSL continua sendo o melhor equilíbrio entre legibilidade e capacidade
  • Para projetos novos — Use o OKLCH como seu espaço de cores principal por sua precisão perceptual
  • Para gradientes — Sempre interpole em OKLCH para evitar transições lamacentas
  • Para sistemas de design — Armazene cores de base em OKLCH, gere variantes com color-mix() ou sintaxe relativa
  • Para canvas/WebGL — Fique com RGB, que é nativo do pipeline de renderização

Conclusão

As funções de cores CSS modernas transformaram o que você pode fazer com cores na web. O OKLCH fornece uniformidade perceptual que torna o design de sistemas de cores previsível. color-mix() e a sintaxe de cores relativas eliminam a necessidade de funções de cor de pré-processador. Juntas, essas ferramentas dão aos desenvolvedores web o mesmo poder de cor que as ferramentas de design oferecem há anos — agora diretamente no navegador.

Use nosso conversor de cores online gratuito para converter entre todos os formatos modernos de cores CSS, incluindo OKLCH, LAB, HWB e os clássicos HEX/RGB/HSL.