为何浏览器渲染的颜色与CSS指定的不一致？

你遇到的是CSS指定颜色和实际屏幕渲染颜色不一致的问题，结合你的环境（Fedora 39 + GNOME X11），主要原因和解决方向如下：

可能的原因 #

• 颜色管理配置冲突：GNOME的系统颜色ICC配置文件，和Chrome、Firefox各自的颜色处理策略不匹配，导致颜色在渲染时被二次转换。
• 取色工具的采样逻辑差异：浏览器插件是直接读取DOM元素的计算后颜色，而GIMP是采样屏幕像素——屏幕像素已经经过系统 compositor（Mutter）的色彩校正，不同浏览器的颜色渲染引擎又有细微差别，最终采样结果自然不同。
• X11 compositor 的色彩处理：GNOME的Mutter在X11环境下，可能对窗口内容应用了gamma校正或色彩空间转换，导致实际显示的像素值偏离原始CSS颜色。

解决步骤 #

1. 统一系统与浏览器的色彩空间

   • 打开GNOME设置 → 颜色，确认当前使用的显示器ICC配置。如果是自定义校准文件，尝试切换到默认的sRGB配置，再测试颜色。
   • Chrome：在地址栏输入chrome://flags/#force-color-profile，将选项设置为sRGB，强制浏览器使用标准色彩空间渲染。
   • Firefox：在地址栏输入about:config，搜索gfx.color_management.mode，设置为0（禁用颜色管理，强制sRGB）或1（跟随系统颜色管理），对比两种设置下的颜色显示效果。

2. 精确验证颜色值

   • 在浏览器开发者工具的「计算样式」面板中，查看该元素的background-color实际计算值——如果这里显示的是#005181，说明CSS已经正确应用，问题出在后续的渲染/显示环节。
   • 使用GNOME自带的取色器（可以通过快捷键Shift+PrintScreen后选择取色），分别在Chrome和Firefox窗口取色，对比结果是否更接近原始值。

3. 排除 compositor 影响

   • 临时禁用Mutter compositor：打开终端执行gsettings set org.gnome.mutter disable-compositor true，然后注销再登录，测试颜色是否一致。如果恢复正常，说明是compositor的色彩处理导致的偏差，可以尝试调整compositor的颜色设置。

4. 检查颜色值转换逻辑

   • 把#005181转换成RGB是(0, 81, 129)，你可以对比取到的#065181、#065082等颜色的RGB值，看偏差是否来自色彩空间的转换（比如从sRGB转换到显示器的原生色彩空间）。如果是这种情况，校准显示器的ICC配置是最根本的解决方法。

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