CSSデモ2件

alpha()

元の色の色成分と色空間を保ったまま、アルファチャンネルだけを差し替えるCSSの関数です。

Playground

固定値と相対値の違いを見る

不透明度60%の色を元にして、固定値を渡した場合とalphaキーワードで相対値を渡した場合の違いをスライダーで確認できます。

アルファ値: 50%

元の色は不透明度60%のoklch(55% 0.22 270 / 0.6)です

var(--origin)

alpha(from var(--origin) / 50%)

alpha(from var(--origin) / calc(alpha * 0.5))

固定値は元の不透明度に関係なくスライダーの値になります。相対値は元の0.6に係数を掛けるので、同じスライダーの値でも常に固定値より薄くなります。

Playground

--brandの色相を動かすと、alpha()で導いた--brand-subtleと--brand-glowが同じ色相のまま追従します。

--brand の色相: 270

--brand-subtle--brand-glow

--brandの色相だけを動かしています。バッジの背景と入力欄の光彩はalpha()で導いた派生色なので、元の色に追従して同じ色相のまま薄くなります。