为何Chrome中rgb(255,0,0)元素加brightness(1.5)滤镜后红色更亮？

Chrome与Firefox对brightness()滤镜的表现差异，核心源于滤镜计算所使用的颜色空间不同：

• Firefox的实现（符合W3C规范）：
  严格按照规范要求，在线性RGB颜色空间执行滤镜操作：

  1. 先将sRGB格式的rgb(255,0,0)转换为线性RGB，此时红色通道值为1.0（sRGB的255对应线性空间的最大值）
  2. 应用brightness(1.5)时，线性通道值乘以1.5得到1.5，随后被钳位回线性空间的最大值1.0
  3. 转换回sRGB格式后仍为rgb(255,0,0)，因此与未加滤镜的元素颜色一致

• Chrome的早期/部分版本实现：
  未遵循规范的线性RGB要求，而是在HSL颜色空间调整亮度：

  1. 将rgb(255,0,0)转换为HSL，其亮度分量为50%（即0.5）
  2. 应用brightness(1.5)后，亮度分量变为0.5×1.5=0.75
  3. 将调整后的HSL值转换回RGB，得到rgb(255, 128, 128)（偏粉红的亮红色），因此视觉上与原纯红有明显差异

后续Chrome逐步向规范对齐，但部分场景下仍可能因硬件加速、显示器色彩配置等渲染管线细节，出现细微的视觉差异。

测试代码 #

<div style="width:200px; height:200px; background-color: rgb(255,0,0);">My guess</div>
<div style="width:200px; height:200px; background-color: rgb(255,0,0); filter:brightness(1.5)">Actual</div>

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