要素の透過率を変化させたときに背景色を考慮して元々の見た目の色と同じ色になるカラーコードを取得する方法

概要

要素の透過率を変化させると、背景の色に影響されて要素の色が変化して見えますよね。
透過率（α）を変化させても背景色の影響を考慮して同じ色になるカラーコード（RGB）を取得する方法を考え、実際にやってみたらうまく行っていたので備忘録として残します。

例1： α=0.8 → α=1

例2: α=1 → α=0.8

求め方

上の図の矢印の左右の状態を=でつなげて方程式にし、それを解きます。

ここで
背景のRGB = (rh,gh,bh)
透過率変化前の要素のRGB = (r,g,b)、透過率 = α
透過率変化後の要素のRGB = (r',g',b')、透過率 = α'
とします。

<方程式>
(1 - α) × (rh,gh,bh) + α × (r,g,b) = (1 - α') × (rh,gh,bh) + α' × (r',g',b')

例1）
0.2 × (255,255,255) + 0.8 × (50,95,150) = (r',g',b')
∴ (r',g',b') = (0.2×255+0.8×50, 0.2×255+0.8×95, 0.2×255+0.8×150)
　　　　　　　　= (91,127,171)

例2）
rgb(50,95,150) = 0.2 × (255,255,255) + 0.8 × (r',g',b')
∴ (r',g',b') = ((50-0.2×255)/0.8, (95-0.2×255)/0.8, (150-0.2×255)/0.8)
　　　　　　　　= (-1.25,55,123.75)
　　　　　　　　≒ (0,55,124)

計算結果を実際の色で確認👀

以下の図は、実際に計算した色を入れた図です。
ほぼ同じ色になっているのがわかります。

上：例1 下：例2

カラーピッカーで色に差があるか調べたところ、
例1：元の色 = 計算結果の色
例2：元の色（#325F96）、計算結果の色（#335F96）

例2にズレが出ているのはrの値がマイナスになっているのを0に切り上げたのが原因です。
これは計算式の問題ではなく、背景色がRGB(255,255,255)で、α=0.8のとき、RGBA(50,95,150,1)と同じ色になるような、RGBの値がないということです。
極端な例でいえば、完全に透明（α=0）な要素の透過率を変化させた時、背景色の影響も考慮して同じ色にするには
背景色 = 透過率を変化させる要素の色
でなければいけません。