🎨
rgba()の透明度を、color-mix()とHEX値で表現する。
まとめると
color-mix(in srgb, #0063c5 50%, transparent)のように書けば、色がHEX値であっても、rbgaの透明度を表現できる
color-mix()とは
そもそも、color-mix()とは、2つの色を混ぜることができるものとのこと。
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()で代替する
color-mix()で、透明度を指定したいhex値と、transparentを組み合わせれば、rgbaのalpha部分を表現可能だった
(カラーピッカーを確認した場合に同じ色になっていた。)
: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: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
}
Discussion