🎨
rgba()の透明度を、rgb()とHEX値で表現する。
結論
rgb(from #0063c5 r g b / 50%)のように書けば、色がHEX値であっても、rbgaの透明度を表現できる
rgb()のfromとは
相対値構文と言うらしい
fromの後に起点となる色を指定すれば、r,g,b,alphaそれぞれで色を変更することが出来る
rgba()の問題点
色をhex値だけで変数化していた場合に、rgba()を利用できなかったため、
sassを利用したり、rgbの中身だけを追加で変数化する方法がよく取られていた。
:root {
--color-primary: #0063c5;
--color-primary-rgb: 0, 99, 197;
}
.contents {
background-color: var(--color-primary);
&:hover {
background-color: rgba(var(--color-primary-rgb), 50%);
}
}
以下の記事でもある通りcolor-mixでも代替はできるが、裏技感が否めない、、
rgb()で代替
:root {
--color-primary: #0063c5;
- --color-primary-rgb: 0, 99, 197;
}
.contents {
background-color: var(--color-primary);
&:hover {
- background-color: rgba(var(--color-primary-rgb), 50%);
+ background-color: rgb(from var(--color-primary) r g b / 50%);
}
}
Discussion