最近有朋友在群里吐槽，说自己做的音乐可视化网页，在同事的电脑上颜色全变了，绿色变黄，红色发紫，还以为是显示器坏了。其实问题可能出在网页渲染引擎的颜色显示异常上。
颜色怎么就不对了？
你调好的渐变色，在别人屏幕上成了“车祸现场”，这事儿还真不少见。尤其是一些依赖色彩表达情绪的音频工具页面，比如频谱动画、音量波形图，颜色一乱，整个氛围就崩了。问题往往不是出在代码逻辑，而是浏览器底层的渲染机制。
现代浏览器用的渲染引擎像 Blink（Chrome）、WebKit（Safari）、Gecko（Firefox），它们在处理颜色空间时默认行为并不完全一致。比如有的默认使用 sRGB，有的在 macOS 上会自动适配 Display P3 色域，结果同一段 CSS 颜色值，在不同设备上呈现的效果就有偏差。
CSS 里的颜色也可能“说谎”
你以为 color: #ff0000 就一定是正红？不一定。如果你的显示器支持广色域，而页面没声明色彩管理，浏览器可能会把 sRGB 的红色强行映射到 P3 色域，颜色就“过饱和”了。
解决办法之一是明确指定颜色空间：
<style>
.wave {
color: color(srgb 1.0 0.0 0.0);
}
</style>这样能强制使用标准 sRGB，减少跨设备偏差。不过得注意，不是所有浏览器都支持 color() 函数，目前主要在较新版本的 Safari 和 Chrome 中可用。
音频工具页面更要注意
做音频可视化工具的人常喜欢用动态着色来反映音高或响度。比如低音用深蓝，高音用亮红。但如果用户用的是 OLED 屏，加上浏览器开启了 HDR 渲染，原本设计的色彩过渡可能就会断层或者偏色。
建议在开发时多用实际设备测试，尤其是 MacBook、iPhone 这类默认启用 P3 色域的设备。也可以在页面头部加入色彩管理提示：
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="srgb">虽然这类 meta 标签还在演进阶段，但提前适配能避免未来兼容问题。
另外，别忘了检查用户的系统设置。有些人在 Windows 的“颜色管理”里自定义了 ICC 配置文件，或者开了夜间模式滤镜，也会导致网页颜色整体偏暖或偏冷。
遇到颜色异常，先别急着改代码。问问对方用的什么设备、什么浏览器，甚至截图环境光情况——有时候问题不在代码，而在那盏黄色的台灯。