css - 将十六进制反转为 rgba() 以获得叠加颜色所需的不透明度

Question

假设我有两个相似的十六进制颜色:#7a82f1 和 #a1a6f4 分别为 rgb(122, 130, 241) 和 rgb(161, 166, 244)。假设可以通过设置 CSS 在父颜色(第一种颜色)之上添加一些白色(具有可变不透明度)来在子元素中实现第二种颜色。

有什么方法可以“反转 rgba”以找到可以应用于一种颜色以获得另一种颜色的白色(或黑色)的不透明度？例如:

.parent {         
    background: #7a82f1;     
    .child {
         background: rgba(255, 255, 255, 0.3); //This is #a1a6f4! however, how do I find out 0.3 without knowing it?
    }
}

目的是能够处理 png/jpeg 设计，而不是处理 PSD 文件的复杂性(或不得不交出自己的文件)。

Answer 1

假设

1. 背景为黑色。
2. A channel 是线性的 (0-255)，因此 0=黑色(背景)和 255=前景
3. 灰度是线性的 (0-255)，所以 0=黑色，255=白色

那么不透明度为 255 的灰色 35 与不透明度为 255*35/52 = 171 的灰色 52 相同。

但是所有这些假设都是可疑的。在对颜色和透明度使用浮点值并控制 Gamma 曲线的游戏编程中，这一切都容易得多。在 CSS 中，情况并非如此。