Sintaxe de Cor Relativa em CSS Explicada

Se você já definiu uma dúzia de propriedades customizadas apenas para criar uma versão semi-transparente da cor da sua marca, você já entende o problema que a sintaxe de cor relativa do CSS resolve. Este recurso permite derivar novas cores diretamente de cores existentes dentro de qualquer função de cor CSS moderna — sem pré-processadores, sem JavaScript, sem variáveis extras.

O Que É a Sintaxe de Cor Relativa do CSS?

As cores relativas do CSS, definidas na especificação CSS Color Level 5, permitem que você pegue uma cor existente — chamada de cor de origem — e use seus canais individuais como variáveis para construir uma nova cor. A adição chave é a palavra-chave from.

Aqui está a estrutura básica:

color-function(from <origin-color> channel1 channel2 channel3)

Quando o navegador encontra from, ele converte a cor de origem no espaço de cor de destino, expõe cada canal como uma variável nomeada e permite que você passe essas variáveis — modificadas ou inalteradas — como os valores de saída.

Isso funciona em funções de cor CSS modernas como rgb(), hsl(), hwb(), lab(), lch(), oklab() e oklch().

Como Funciona a Sintaxe CSS from Color

Veja este exemplo simples:

/* Origin color: green */
/* Channels exposed: r=0, g=128, b=0 */
color: rgb(from green r g b); /* outputs rgb(0 128 0) */

A saída é idêntica à entrada aqui, mas o verdadeiro poder é que você pode modificar canais individuais usando calc():

/* Rotate the hue by 180 degrees to get the complement */
background: hsl(from blue calc(h + 180) s l);

/* Lighten by multiplying the lightness channel */
background: oklch(from blue calc(l * 1.25) c h);

/* Reduce opacity without a separate variable */
background: rgb(from lime r g b / 50%);

Os valores dos canais são resolvidos como números simples dentro da função, então a aritmética do calc() funciona de forma limpa sem incompatibilidades de unidades.

Por Que as Cores Relativas OKLCH Valem a Pena Usar

Nem todos os espaços de cor são iguais para manipulação. HSL é familiar, mas seu canal de luminosidade não é perceptualmente uniforme — ajustar l pela mesma quantidade produz resultados visualmente inconsistentes em diferentes matizes.

OKLCH resolve isso. Seu canal de luminosidade é perceptualmente uniforme, o que significa que uma mudança de +0.1 parece o mesmo passo visual independentemente do matiz. Isso o torna uma escolha forte para gerar tons, sombras e pares de contraste acessíveis.

Se você não está familiarizado com espaços de cor perceptuais, o modelo de cor OKLab/OKLCH introduzido por Björn Ottosson explica o raciocínio por trás desses espaços de cor mais recentes.

/* Darken by 25% */
background: oklch(from var(--color-primary) calc(l * 0.75) c h);

/* Generate a high-contrast text color */
color: oklch(from var(--color-primary) calc(l + 0.6) c h);

Note que o canal de luminosidade no OKLCH varia de 0 a 1, então uma mudança de calc(l + 0.6) é substancial. Valores que excedem o intervalo válido são limitados automaticamente pelo navegador.

Cores Relativas vs. color-mix()

Esses dois recursos de cor do CSS servem propósitos diferentes. color-mix() mistura duas cores juntas em uma proporção especificada. As cores relativas do CSS manipulam os canais de uma única cor de origem diretamente. Se você precisa de um estado de hover, uma variante suavizada ou um token com opacidade ajustada, a sintaxe relativa é a ferramenta certa. Se você precisa interpolar entre duas cores distintas, use color-mix().

Integrando em um Sistema de Design Baseado em Tokens

É aqui que as cores relativas do CSS realmente brilham. Defina um token base e depois derive todas as variantes dele:

:root {
  --color-primary: #3b82f6;

  --color-primary-hover:    oklch(from var(--color-primary) calc(l * 0.9) c h);
  --color-primary-active:   oklch(from var(--color-primary) calc(l * 0.8) c h);
  --color-primary-disabled: oklch(from var(--color-primary) l c h / 0.5);
  --color-on-primary:       oklch(from var(--color-primary) calc(l + 0.6) c h);
}

Altere --color-primary e todos os tokens derivados são atualizados automaticamente. Sem funções Sass, sem etapa de build.

Suporte dos Navegadores

A sintaxe de cor relativa é suportada em versões modernas do Chromium, Firefox e Safari. Use @supports para protegê-la com segurança:

@supports (color: rgb(from white r g b)) {
  /* relative color syntax is available */
}

Para navegadores que não têm suporte, forneça uma cor de fallback antes da declaração de cor relativa. A cascata garante que navegadores mais antigos usem o valor estático enquanto navegadores modernos o sobrescrevem:

.button {
  background: #3b82f6;
  background: oklch(from var(--color-primary) calc(l * 0.9) c h);
}

Conclusão

A sintaxe de cor relativa do CSS substitui toda uma categoria de lógica de pré-processador por um único padrão legível. Escolha OKLCH para ajustes de luminosidade perceptualmente consistentes, use hsl() quando precisar de controle direto de saturação e conecte tudo a uma propriedade customizada para que toda a sua paleta permaneça sincronizada a partir de um único token de origem.

Perguntas Frequentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.