2

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?

1
  • 2
    Pode usar hex com alpha, azul em hex é #0000ff, com alpha .9 vai ficar #0000ff90, em <hex-color> fica então RR, GG, BB e AA (o último sendo opcional) ou de 4 valores, #00f9, sendo R, G, B, A. Infelizmente CSS não fornece um meio prático e fácil de concatenar valores variados.
    – Syzoth
    Commented 9/08/2022 às 19:14

1 Resposta 1

2

Existem situações que é melhor reescrever e usar o que já existe para isso, como o RGB que irá lhe servir para alternar entre RGB e RGBA, mas aonde não há saída para fazer ir pelo ideal, e como CSS não tem algo nativo para mesclar cores com outros efeitos obtendo uma cor variada, então você terá que usar algo que no fim será uma saída alternativa (e provavelmente paliativa).

Se for mesmo para colorir um texto com hexadecimal, e ao mesmo tempo controlar a opacidade da cor, você pode usar elementos inline assim aplicando opacity: só no texto de interesse, para separar do resto, então um exemplo simples seria:

:root {
  --foo: #00ffcd;
  --bar: blue;
  --baz: #fc0;
}

.cor1comalpha {
  color: var(--foo);
  opacity: .9;
}

.cor2comalpha {
  color: var(--bar);
  opacity: .5;
}

.cor3comalpha {
  color: var(--baz);
  opacity: .2;
}

.card {
   font-size: 12pt;
   font-weight: bold;
   background: #4d4d4f;
   background-image: linear-gradient(90deg, #ccc 0%, #000 49%, #000 50%, #000 100%);
   padding: .85em;
   margin: .25em;
   color: #fff;
   display: inline-block;
   width: 200px;
   height: 120px;
   box-shadow:
       0 2px 2px 0 rgb(0 0 0 / 14%),
       0 3px 1px -2px rgb(0 0 0 / 12%),
       0 1px 5px 0 rgb(0 0 0 / 20%);
}
<div class="card">
   Foo bar baz foo bar baz foo bar baz
   Foo bar baz foo <span class="cor1comalpha">foo bar baz foo bar baz</span>
   Foo bar baz foo bar baz foo bar baz
   Foo bar baz foo bar baz foo bar baz
</div>

<div class="card">
   Foo bar baz foo bar baz foo bar baz
   Foo bar baz <span class="cor2comalpha">foo bar baz foo bar baz</span>
   Foo bar baz foo bar baz foo bar baz
   Foo bar baz foo bar baz foo bar baz
</div>

<div class="card">
   Foo bar baz foo bar baz foo bar baz
   Foo <span class="cor3comalpha">bar baz foo bar baz foo bar baz</span>
   Foo bar baz foo bar baz foo bar baz
   Foo bar baz foo bar baz foo bar baz
</div>

3
  • No geral não seria para apenas colorir textos, mas qualquer lugar que venha cor, como um outline: 1px solid var(). Não há maneiras de alcançar isso com CSS nativo, mas, não existe algo que possa acontecer no futuro? Commented 9/08/2022 às 20:57
  • Nunca se sabe, até o momento, pelo que pesquisei não, mas para o futuro próximo e provavel o ideial é revisar o código, quando for possivel e trocar o hex por RGB, que vai lhe ajudar na maioria desses cenários dinâmicos que você precisa.
    – Syzoth
    Commented 9/08/2022 às 20:59
  • 1
    Observação: para efeitos como border, outline, e até background, você poderá sim conseguir o efeito, como saída paliativa (vulgo gambiarra) usando pseudo elementos, ::before e ::after dentro de um elemento com position: relative; e os pseudo-elementos com position: abolute;, controlando o z-index :)
    – Syzoth
    Commented 9/08/2022 às 21:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .