Объект одного цвета, но с разной степенью непрозрачности

Question

У меня есть объект с набором информации, включая цвет. Я предполагаю, что этот цвет будет реализован как цвет фона с непрозрачностью и как цвет текста (без непрозрачности, чтобы выглядеть по-другому).

Кто-нибудь знает, как я могу сделать это так, чтобы через цвет объекта / переменной, я могу добавить непрозрачность?

DEMO

.ts

color: string = "green";
name:string = "ABC";
id: number = 1;

. html

<div style="display: flex; flex-direction: column; width: 60%;">
        <span [style.background-color]="color" [style.color]="color" class="cc">{{name}}</span>
        <span [style.background-color]="color" class="mb" [style.color]="color">{{id}}</span>
    </div>

Проблема

Я хочу, чтобы цвет фона имел непрозрачность, поэтому что текст виден. Я намереваюсь добиться этого, не создавая переменную с «другим» цветом.

Answer 1

Вы можете добавить дополнительный слой между текстом и фоном, где вы применяете непрозрачность:

.box {
  padding:10px;
  display:inline-block;
  color:var(--c);
  background:var(--c);
  position:relative;
  z-index:0;
}

.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255, 255, 255, 0.5);
}

<div class="box" style="--c:red">some text</div>

<div class="box" style="--c:blue">some text</div>

<div class="box" style="--c:green">some text</div>

Та же идея без псевдоэлемента:

.box {
  padding:10px;
  display:inline-block;
  color:var(--c);
  background:var(--c);
  
  background-image:linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5))!important;
}

<div class="box" style="--c:red">some text</div>

<div class="box" style="color:blue;background:blue;">some text</div>

<div class="box" style="color:green;background-color:green;">some text</div>

Answer 2

Для этого вы можете использовать пакет color NPM:

import Color from 'color';

const colorWithOpacity = Color(yourColor).alpha(yourOpacity).rgb().string();

Вам нужно будет настроить свой код, чтобы передать colorWithOpacity вашим стилям.