色を透過させたときのカラーコードをJSで求める

経緯

色を一定値で薄くしたくて単にrgbaの指定で薄くすると、当然の如く透過しており背景がうっすら見えてしまいます。
薄い色を指定すれば済むかもしれませんが、javascriptで計算してみました。

アルファブレンド

2つの画像を重ねたときの重なっている箇所の色を求めるものです。
透過させている赤と青を重ねると紫になりますが、この紫のカラーコードを求めるようなものと思っております。(詳しくないです。)

式的には以下になります。

out_{rgb} = src_{rgb} * alpha_{src} + dest_{rgb} * (1 - alpha_{src})

今回はこれをより単純に扱います。

out_{rgb} = src_{rgb} * alpha_{src} + 255 * (1 - alpha_{src})

10進数で考えた場合255は白色です。背景の白色に単に透過させた色を合成することで薄くしたときのカラーコードを取得するという寸法です。

実際に、簡単にコードを書いてみます

function compositeColor(code, alpha) {
  const colorCode = parseInt(code, 16) * alpha + 255 * (1 - alpha);
  return Math.floor(colorCode).toString(16);
}

function convertToPaleColor(colorCode, alpha) {
  // colorCodeは`#`を除いた16進数とします。
  const codes = [colorCode.slice(0, 2), colorCode.slice(2, 4), colorCode.slice(4, 6)];
  return codes.map(code => compositeColor(code, alpha)).join("");
}

convertPaleColor("FF0000", 0.1);
// "ffe5e5"

これだけです。たまに役に立つかもしれません。