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.
Atualmente 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, é possível desde que a variável não seja uma cor, e sim a definição RGB dela. No entanto, essa resolução só funciona com cores no formato RGB e não funciona 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?
#0000ff
, com alpha.9
vai ficar#0000ff90
, em<hex-color>
fica entãoRR
,GG
,BB
eAA
(o último sendo opcional) ou de 4 valores,#00f9
, sendoR
,G
,B
,A
. Infelizmente CSS não fornece um meio prático e fácil de concatenar valores variados.