読者です 読者をやめる 読者になる 読者になる

アルファブレンドした結果が指定の色になる透過色を探す

最近のブラウザではCSSで半透明カラーを指定できる。

div.box {
  background-color:rgba(255, 248, 200, 0.5);
}

背景を透かしたとき見かけ上この色になるようにしたい、と思うと背景色からいちいち計算しなくてはいけないので面倒だ。面倒なので、アルファブレンドした結果が指定した色になるような透過色のrgbaの値を計算してくれる簡単なツールを作成してみた。

http://nullpon.moe/dev/tool/alpha_blender/

計算結果が0から255の値に収まらないこともあるので、必ずしも指定の色になるような透過色が存在するとは限らない。

アルファブレンドは以下の式で求める。(0:合成結果、1:透過色、2:背景色、a:透過率)

r0 = r1 * a + r2 * (1 - a)
g0 = g1 * a + g2 * (1 - a)
b0 = b1 * a + b2 * (1 - a)

この計算でrbg値を求めるのがアルファブレンディング。[r0, g0, b0] は合成した結果、見かけ上この色になってほしいという色である。これと [r2, g2, b2](背景色)と a(透過率)から [r1, g1, b1] (透過色)を求めている。単なる一次方程式なので難しくない。