【CSS】カスケード変数(root)のRGBAカラーを半透明に

カスケード変数で、RGBAカラーを設定。
その後、アルファ値だけ変えて、半透明にできないか?

ということで、ChatGPT先生にお知恵を拝借。

:root {
  --color: rgba(250, 200, 150, 1); /* rgb(250, 200, 150) も可 */
}
.box {
  background-color: rgb(from var(--color) r g b / 0.5);
}

こんな書き方ができるみたいです。
勉強になりますね。

これで決まったカラーを使いまわしつつ、部分的に半透明にする事が可能になりました。

See the Pen root-rgba-color-semi-transparent by Rin5Graphic (@rin5graphic) on CodePen.