Criar temas para animações baseados em interação do usuário ou hora do dia geralmente leva a manter múltiplos valores de cor hardcoded. As Cores Relativas CSS, combinadas com o espaço de cor OKLCH, oferecem uma solução sistemática: defina uma cor base e derive todas as outras dela. Este tutorial te guia na implementação dessa técnica poderosa para suas animações SVG. Para se aprofundar, você pode consultar o artigo original no Smashing Magazine.
Conceito Central: Sintaxe de Cor Relativa & OKLCH
A sintaxe de Cor Relativa CSS usa o formato oklch(from [cor-base] [ajustes]). Os três canais do OKLCH—Lightness (luminosidade), Chroma (croma) e Hue (matiz)—permitem uma manipulação intuitiva da cor.
/* 1. Defina uma cor base (qualquer formato funciona) */
--foundation: #5accd6;
/* 2. Crie cores derivadas usando cor relativa */
/* Ajuste Lightness (mais escura) */
--foundation-dark: oklch(from var(--foundation) calc(l - 0.20) c h);
/* Ajuste Chroma (reduzir por proporção) */
--foundation-muted: oklch(from var(--foundation) l calc(c * 0.5) h);
/* Ajuste Hue (criar complementar - rotação de 180deg) */
--foundation-complement: oklch(from var(--foundation) l c calc(h + 180));
No código acima, l, c e h referem-se aos valores de luminosidade, croma e matiz da cor base. Usar calc() para modificar esses valores gera novas cores.
Aplicação Prática: Construindo um Sistema de Tema para Animações
Princípios Guia para Relações de Cor
Da experiência prática, o autor recomenda:
- Mova a Luminosidade (Move It): Some ou subtraia valores absolutos.
- Escalone o Croma (Scale It): Multiplique por uma proporção para manter a relação com a cor base.
- Gire o Matiz (Rotate It): Some ou subtraia graus.
Aplicando a Gradientes SVG
/* Estilos inline no SVG */
<linearGradient id="bgGradient">
<stop offset="0%" style="stop-color: var(--grad-start);" />
<stop offset="100%" style="stop-color: var(--grad-end);" />
</linearGradient>
/* Defina as cores do gradiente no CSS */
--foundation: #5accd6;
--grad-end: var(--foundation);
--grad-start: oklch(from var(--foundation)
calc(l - 0.2357) /* Diminui luminosidade */
calc(c * 0.833) /* Escala croma */
h); /* Mantém matiz */
Agora, mudar o valor de --foundation atualiza automaticamente ambas as paradas do gradiente. Chega de recálculos manuais! 🎨
Técnica Avançada: Animando a Própria Cor
Além da tematização estática, você pode animar a cor base. Registrar seus canais com @property permite uma interpolação suave.
/* 1. Registre os canais OKLCH como propriedades customizadas tipadas */
@property --f-l { syntax: '<number>'; inherits: true; initial-value: 0.40; }
@property --f-c { syntax: '<number>'; inherits: true; initial-value: 0.11; }
@property --f-h { syntax: '<number>'; inherits: true; initial-value: 305; }
/* 2. Reconstrua a cor base a partir dos canais */
--foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
/* 3. Defina keyframes para animar um canal */
@keyframes breathe {
0%, 100% { --f-l: 0.36; }
50% { --f-l: 0.46; }
}
/* 4. Aplique a animação */
.toon-title {
animation: breathe 10s ease-in-out infinite;
}
Conforme --foundation anima, todas as cores derivadas dela (--foundation-dark, --grad-start, etc.) ganham vida em uníssono. Animando um único valor, você atualiza todo o sistema de cores, facilitando muito a manutenção. Olha que maravilha! ✨
Cores Relativas CSS são mais do que apenas sintaxe; elas representam um paradigma poderoso para construir sistemas de design. Considere aplicar isso a estados de botão, modo escuro ou feedback visual. Vai mudar fundamentalmente como você pensa sobre cor na web.