Explorando a Criatividade das Cores: Misturando Cores usando Apenas CSS!

Vermelho + Azul = Roxo ... certo?

Existe alguma maneira de expressar isso no CSS? Bem, não facilmente. Há um projeto de proposta para color-mix função e algum grau de interesse do Chrome, mas não parece estar chegando. Seria bom ter uma mistura de cores CSS nativa, pois daria aos designers maior flexibilidade ao trabalhar com cores. Um exemplo é criar variantes coloridas de uma única cor base para formar uma paleta de design.

Mas isso é CSS-Tricks, então vamos fazer alguns truques de CSS.

Nós temos um calc() função em CSS para manipular números. Mas temos muito poucas maneiras de operar diretamente nas cores, apesar de alguns formatos de cores (, por exemplo. hsl() e rgb()) são baseados em valores numéricos.

Misturando cores com animação

Podemos fazer a transição de uma cor para outra no CSS. Isso funciona:

 div {
 background: blue;
 transition: 0.2s;
}
div:hover {
 background: red; 
}

E aqui está isso com animações:

div {
 background: blue;
 transition: 0.2s;
}
div:hover {
 animation: change-color 0.2s forwards;
}


@keyframes change-color {
 to {
 background: red;
 }
}

Esta é uma animação de quadro-chave que roda infinitamente, onde você pode ver a cor se movendo entre vermelho e azul. Abra o console e clique na página —. Você pode ver que mesmo o JavaScript pode informar a cor atual em qualquer ponto exato da animação.

Obter a cor mista em uma propriedade personalizada do CSS

Até agora, esse é um truque interessante, mas não é muito prático aplicar uma animação em qualquer elemento em que você precise usar uma cor mista, e, em seguida, é necessário definir todas as propriedades que você deseja alterar dentro do @keyframes.

Podemos melhorar isso se adicionarmos mais alguns recursos do CSS:

1. Use um @property propriedade personalizada CSS digitada, para que possa ser criado como uma cor adequada e, portanto, animado como uma cor.
2. Use um Sass @function para chamar facilmente quadros-chave em um ponto específico.