如何通过CSS/SASS计算两种重叠颜色的最终色值？

可以通过Sass的颜色函数计算出叠加后的纯色值，CSS原生目前没有直接的颜色混合函数，以下是具体方案：

1. Sass 计算方案 #

方法一：手动计算RGB通道值 #

利用Sass的颜色提取函数和数学运算，直接模拟颜色叠加的计算逻辑：

// 定义基础颜色
$bg-color: #FFF8F6;
$overlay-color: rgba(173, 51, 0, 0.14);

// 提取颜色参数
$overlay-r: red($overlay-color);
$overlay-g: green($overlay-color);
$overlay-b: blue($overlay-color);
$overlay-alpha: alpha($overlay-color);

$bg-r: red($bg-color);
$bg-g: green($bg-color);
$bg-b: blue($bg-color);

// 计算叠加后的每个RGB通道值
$result-r: $overlay-r * $overlay-alpha + $bg-r * (1 - $overlay-alpha);
$result-g: $overlay-g * $overlay-alpha + $bg-g * (1 - $overlay-alpha);
$result-b: $overlay-b * $overlay-alpha + $bg-b * (1 - $overlay-alpha);

// 转换为十六进制颜色
$final-text-color: rgb($result-r, $result-g, $result-b);

// 使用示例
.text {
  color: $final-text-color;
}

方法二：使用Sass内置的mix()函数 #

mix()函数支持带透明度的颜色混合，只需设置对应权重即可：

$bg-color: #FFF8F6;
$overlay-color: rgba(173, 51, 0, 0.14);
$overlay-weight: alpha($overlay-color) * 100; // 转换为百分比权重

$final-text-color: mix($overlay-color, $bg-color, $overlay-weight);

.text {
  color: $final-text-color;
}

2. 无需预处理器的方案 #

直接手动计算出叠加后的十六进制色值，直接写在CSS中：
通过颜色叠加公式计算，最终得到的纯色值为 #F4DCD4，使用时直接写：

.text {
  color: #F4DCD4;
}

计算验证 #

两种颜色的RGB值：

• 背景色 #FFF8F6：rgb(255, 248, 246)
• 叠加色 rgba(173,51,0,0.14)：rgb(173, 51, 0)，透明度0.14

每个通道计算公式：叠加后值 = 叠加色通道值 × 透明度 + 背景色通道值 × (1 - 透明度)
计算结果：

• R: 173×0.14 + 255×0.86 ≈ 244
• G: 51×0.14 + 248×0.86 ≈ 220
• B: 0×0.14 + 246×0.86 ≈ 212

对应十六进制即为 #F4DCD4。

内容的提问来源于stack exchange，提问作者Francesco