Eu tenho algumas cores em algumas variáveis, como por exemplo:
:root {
--link-color: #006265;
--link-color-alt: blue;
}
Eu gostaria de usar essas cores, mas especificando opacidade, sem ter que reescrever elas, como por exemplo:
background-color: color_opacity(var(--link-color), .5);
color: color_opacity(var(--link-color-alt), .9);
Note que
color_opacity
não existe, é apenas um pseudo-código de como seria a solução.
O códigoAtualmente existe uma "solução" para cores no formato RGB, que na declaração podemos usar:
:root {
--link-color: 0, 98, 101; /* sem o rgb() */
}
body { color: rgba(var(--link-color), 50%); }
No exemplo acima, é um pseudo-exemplo dopossível desde que estou tentando obter. Achei soluções de escrever as cores RGB (sem a função), separadas por vírgulasvariável não seja uma cor, mase sim a maioria das minhas cores estão em HEXdefinição RGB dela. TambémNo entanto, essa resolução só funciona com cores no formato RGB e não gostaria de definir uma variável para cada opacidadefunciona com demais formatos.
É importante mencionar que procuro opacidade para as cores e não os elementos que utilizam elas.
Existe alguma forma de fazer isso nativamente e puramente em CSS?