O que é o color-mix:
A função color-mix() traz a capacidade de misturar cores para o CSS. Os desenvolvedores podem escolher em qual espaço de cores desejam realizar a mistura e qual deve ser a dominância de cada cor na mistura.
.color-mixing-after {
/* equally mix red with white */
--red-white-mix: color-mix(in oklab, red, white);
/* equally mix red with white in srgb */
--red-white-mix-srgb: color-mix(in srgb, red, white);
}
Isso é o que queremos. Flexibilidade, poder e APIs totalmente abrangentes.
Diferentes espaços de cor
O espaço de cor padrão para mistura (e gradientes) é o oklab. Ele fornece resultados consistentes. Você também pode especificar espaços de cor alternativos para personalizar a mistura conforme suas necessidades.
Considere preto e branco, por exemplo. O espaço de cor em que eles são misturados não faz tanta diferença, certo? Errado.
color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);
Agora veja azul e branco:
Escolhi isso especificamente porque é um caso em que a forma de um espaço de cor pode afetar os resultados. Neste caso, muitos espaços de cor tendem a ficar roxos ao transitar de branco para azul. Isso também mostra como o oklab é um espaço de cor confiável para mistura, sendo o mais próximo das expectativas da maioria das pessoas ao misturar branco e azul (sem roxo).
Podemos montar paletas inteiras de cor:
Vamos montar nossa primeira paleta com o color-mix!!
No seguinte CSS, são criados um tema claro e um tema escuro com base em uma cor hexa da marca. O tema claro cria duas cores de texto azul escuro e uma cor de superfície de fundo branca muito clara. Em seguida, em uma consulta de mídia de preferência escura, as propriedades personalizadas recebem novas cores para que o fundo seja escuro e as cores do texto sejam claras.
:root {
/* a base brand color */
--brand: #0af;
/* very dark brand blue */
--text1: color-mix(in oklab, var(--brand) 25%, black);
--text2: color-mix(in oklab, var(--brand) 40%, black);
/* very bright brand white */
--surface1: color-mix(in oklab, var(--brand) 5%, white);
}
@media (prefers-color-scheme: dark) {
:root {
--text1: color-mix(in oklab, var(--brand) 15%, white);
--text2: color-mix(in oklab, var(--brand) 40%, white);
--surface1: color-mix(in oklab, var(--brand) 5%, black);
}
}
Com isso podemos fazer diferentes paletas.
Esquema de cores intermediario:
Estamos muito acostumados com o esquema light e dark, mas se eu te contar que com esse atributo podemos fazer um esquema de cores totalmente novo, o dim.
Light:
Dark:
Dim:
Conclusão
Em resumo, a introdução da função color-mix() no CSS representa um avanço significativo, capacitando os desenvolvedores a misturar cores de forma flexível e personalizada. A capacidade de escolher espaços de cores e a influência de cada tonalidade na mistura oferece uma ampla gama de possibilidades, destacando a importância do espaço de cor na obtenção de resultados desejados. O artigo demonstra como essa função possibilita a criação de temas dinâmicos, adaptação a preferências de usuários e a inovação na construção de paletas de cores, promovendo uma abordagem refinada e personalizada na manipulação de cores no CSS.
Referencias: