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

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

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

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

計算結果が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] （透過色）を求めている。単なる一次方程式なので難しくない。