CSS中处理颜色时默认使用的是RGB颜色模型，这种模型下的颜色叠加规则和传统颜料混合的逻辑完全不同，因此红绿蓝叠加不会得到黑色。RGB模型是通过红（Red）、绿（Green）、蓝（Blue）三个通道的光强组合来呈现颜色，每个通道的取值范围通常是0到255，数值越高代表该通道的光强越强。
RGB颜色模型的基本逻辑
在RGB模型中，每个颜色通道的数值代表对应光的亮度，当三个通道的数值都为0时，没有光发出，呈现黑色；当三个通道的数值都为255时，三种光强度达到最大，叠加后呈现白色。这和颜料混合的逻辑相反，颜料混合时红色、绿色、蓝色颜料叠加会吸收大部分光线，最终呈现黑色，而光的三原色叠加是光强叠加，最终会更亮。
我们可以通过rgb()函数来设置CSS颜色，三个参数分别对应红、绿、蓝通道的数值，示例如下：
/* 纯红色，只有红色通道为最大值 */
.red {
color: rgb(255, 0, 0);
}
/* 纯绿色，只有绿色通道为最大值 */
.green {
color: rgb(0, 255, 0);
}
/* 纯蓝色，只有蓝色通道为最大值 */
.blue {
color: rgb(0, 0, 255);
}
/* 红绿蓝叠加，三个通道都为最大值，呈现白色 */
.white {
color: rgb(255, 255, 255);
}
/* 三个通道都为0，呈现黑色 */
.black {
color: rgb(0, 0, 0);
}
颜色叠加的常见场景
CSS中颜色叠加通常出现在多个半透明元素重叠的场景，这时候会使用alpha通道（透明度），也就是RGBA模型，A通道的取值范围是0到1，0代表完全透明，1代表完全不透明。
当多个半透明元素叠加时，颜色的计算遵循光叠加的逻辑，而不是颜料混合逻辑。比如一个半透明的红色元素和一个半透明的绿色元素叠加，最终的颜色是两个元素颜色的混合，而不是两者混合变暗。
叠加计算示例
我们可以通过两个半透明div叠加来观察效果，代码如下：
<div class="container"> <div class="layer red-layer"></div> <div class="layer green-layer"></div> <div class="layer blue-layer"></div> </div>
对应的CSS样式：
.container {
position: relative;
width: 200px;
height: 200px;
}
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 半透明红色，alpha为0.5 */
.red-layer {
background-color: rgba(255, 0, 0, 0.5);
}
/* 半透明绿色，alpha为0.5 */
.green-layer {
background-color: rgba(0, 255, 0, 0.5);
top: 30px;
left: 30px;
}
/* 半透明蓝色，alpha为0.5 */
.blue-layer {
background-color: rgba(0, 0, 255, 0.5);
top: 60px;
left: 60px;
}
运行上述代码后，三个半透明颜色重叠的区域会呈现接近白色的效果，因为三个通道的光强都叠加了，而不是变暗成黑色。
常见误区说明
很多开发者会混淆光的三原色和颜料的三原色，颜料的三原色是品红、黄、青，这三种颜料叠加会吸收大部分光线，呈现黑色；而CSS使用的是光的三原色红、绿、蓝，叠加时光强增加，最终会呈现白色。如果需要在CSS中实现类似颜料混合的变暗效果，可以使用mix-blend-mode属性，设置混合模式为multiply，这种模式下颜色叠加会模拟颜料混合的逻辑，红绿蓝叠加就会得到接近黑色的效果。
使用mix-blend-mode的示例如下：
/* 设置混合模式为正片叠底，模拟颜料混合效果 */
.multiply-mode {
mix-blend-mode: multiply;
}
给之前的半透明层添加这个类后，三个颜色叠加的区域就会变暗，红绿蓝叠加最终会呈现接近黑色的效果。
总结
CSS中红绿蓝叠加不是黑色，核心原因是CSS默认使用RGB光三原色模型，颜色叠加是光强叠加，而不是颜料混合。如果需要实现变暗的叠加效果，可以通过调整混合模式来实现。理解颜色模型的差异，能帮助开发者更准确地控制页面颜色效果，避免出现颜色不符合预期的开发问题。
CSSRGB_color_model颜色叠加前端样式修改时间：2026-07-22 04:57:22