透明度とアルファ合成 ― RGBA と色の重なり

アルファは不透明度

色に、その色がどれだけ不透明かを表す値を足したものがアルファです。0 で完全に透明、1(または 100%)で完全に不透明になります。CSS では rgb(… / 50%) や #RRGGBBAA の形で指定します。

重ねると色が混ざる

半透明の色を背景の上に重ねると、下の色が透けて混ざり、見た目の色が変わります。同じ半透明の白でも、黒い背景に重ねれば灰色に、青い背景に重ねれば淡い青になります。つまり半透明の色は、単独では最終的な色が決まりません。

アルファ合成の式

重ねたときの色は、前景の色と背景の色を不透明度で混ぜて求めます。各成分(R・G・B)ごとに次の計算をします。

結果 = 前景 × α + 背景 × (1 - α)

α が 0.5 なら、前景と背景をちょうど半々に混ぜた色になります。

使いどころ

影やオーバーレイ、うっすら重ねる装飾などに使います。白を薄く重ねれば淡く、黒を薄く重ねれば暗く、手軽にトーンを調整できます。

注意

半透明の色は背景しだいで見え方が変わるため、「この色」と確定させたい場面には向きません。最終的な色を固定したいときは、合成した結果を不透明な色として求め直すとよいでしょう。