変数化した色を半透明にしたい（rgb()関数内で使用する）

Last updated at 2024-08-27Posted at 2024-08-27

変数化した色を rbg() 関数で使用して半透明にしたい

変数化した色を半透明にしたいことがある
opacityで調整すると要素全体が半透明になるため、色のみを半透明にしたい
しかし、変数化した16進表記の色はそのままだとrgb()関数内で使用できない

:root {
    --main-color: #ff0000;
}

以下だと上手くいかない

element {
    /*これはエラーになる*/
    background-color: rgb(var(--main-color) / 0.5);
}

10進表記（255 0 0）の変数を別途用意すれば解決するが、それは野暮ったくて嫌だ

相対値構文を使用することで解決できる

element {
    background-color: rgb(from <16進表記の色> r g b / 0.5)
}

element {
    background-color: rgb(from var(--main-color) r g b / 0.5);
}