Chrome在呈现颜色时与Safari和Firefox不同

Question

Chrome在某些情况下将#FF3A00渲染为#FF0000。我在jsfiddle上附上了一个截图来说明这一点。颜色计量器报告的颜色（和我看到的颜色）与CSS所说的不同。

其他颜色也会出现这种情况。例如，#FFAF00根据颜色计量器的显示被渲染为#FFA400。

然而，在Safari和Firefox上都没有问题地呈现颜色。我使用Chrome 11、Safari 5和Firefox 5在Mac上操作。

我相信有一个合理的解释。你有什么想法吗？

更新：我附上了一张显示Chrome和Safari相同页面的屏幕截图。我在Photoshop中检查了这张图片：Chrome中的颜色是#F00，在Safari中是#FF3A00。

- Evgeny Shadchnev

---

2016年，21世纪了，但这个问题仍然存在... - Mariano Montañez Ureta

2017年和Chrome 60版本，问题仍然存在。Chrome渲染幽灵颜色。如果Chrome决定使用其他颜色，那么花费数天设计和选择最佳颜色的意义何在！ - mohdajami

很有趣...2018年和Chrome 67仍然存在这个问题。 - Mateusz Jagiełło

2019年到了，我们成功了，亲们！ - Mahir

2020 年，Chrome 浏览器版本为 80。 - George

Answer 1

好的，事实证明，我需要重新启动Chrome。我经常将我的Macbook Air连接到一台24英寸的显示器。看起来当我切换到一个与启动Chrome时使用的显示器不同的显示器时，Chrome会错误地显示颜色。

我在Google帮助论坛上找到了答案：“我应该提醒的是，在OS X中，每次更改您的显示器或显示器配置文件（例如，如果您从笔记本电脑显示器切换到外部显示器），您必须重新启动Chrome才能从操作系统获取正确的显示器配置文件信息。”

- Evgeny Shadchnev

---

这是一个非常好的答案，它需要在这个帖子中得到更多的曝光。那个问题让我发疯了！ - Hugo

是的！这是正确的答案，为什么错误的答案被接受了？ - Wojciech Bednarski

也许这个方法可以解决问题，或者对于某些人来说有所帮助，但是对我来说并不起作用。 - boxed

对我来说，实际上似乎并不适用。即使重新启动 Chrome，颜色表现仍然明显不同。 - Kris

Answer 2

默认情况下，Firefox和Safari使用sRGB颜色配置文件。 如果您的Google Chrome采用不同的颜色配置文件作为默认设置，则必须执行相同的操作。

1. 访问Chrome：chrome://flags/#force-color-profile
2. 将强制颜色配置文件更改为"sRGB"。
3. 重新启动你的浏览器，现在测试呈现的颜色。

- Lindoélio Lázaro

Answer 3

我最近发布了一个类似的问题：https://stackoverflow.com/questions/6338077/google-chrome-for-mac-css-colors-and-display-profiles

正如安德鲁·马歇尔在那里回答的，这是一个已知的问题：http://code.google.com/p/chromium/issues/detail?id=44872

- Trevor Burnham

---

我现在遇到了与上面链接的Chromium问题列表中完全相反的情况。Chrome看起来很好，但Firefox的颜色不匹配。我认为这个页面涉及了这些问题，但对我来说有点超出了范围。https://bugzilla.mozilla.org/show_bug.cgi?id=999600 - Mysterfxit

@Trevor Burnham 这个问题显示“状态：重复（已关闭）”。您知道我在哪里可以找到未关闭的版本吗？ - mesqueeb

@mesqueeb 前往“MergedInto”问题，该问题标记为“已修复（已关闭）”：https://bugs.chromium.org/p/chromium/issues/detail?id=667431 - Nateowami

截至2020年，这似乎仍然是一个问题。我在我的OS X Chrome上遇到了这个问题，而Firefox显示正确的颜色，而Chrome则呈现错误的RGB值... - tonix

不确定是否存在浏览器错误，但在Chrome中，我必须将force-color-profile设置为sRGB才能匹配Linux中Firefox的颜色，因此我提交了两个问题（不确定哪个浏览器有问题）：https://bugs.chromium.org/p/chromium/issues/detail?id=1133990和https://bugzilla.mozilla.org/show_bug.cgi?id=1668444。 - trusktr

Answer 4

Mac已经为您的显示器设置了颜色校正。您的浏览器可能会根据其设置使用颜色校正来处理网络内容/图像，也可能不会。您的颜色选择器报告的是您的操作系统认为正在呈现的颜色。您的浏览器可能会报告其他内容。

计算机上的颜色。许多人都认为这是理所当然的，但从未去了解它是如何呈现的。

- artificialidiot

Answer 5

如果有人因为Firefox的图片颜色太饱和而来到这里，请看如何解决：

完整指南请点击

1. 在 Firefox 地址栏中键入 about:config
2. 将 gfx.color_management.mode 设置为 1
3. 将 gfx.color_management.enablev4 设置为 true
4. 重新启动 Firefox

现在，Firefox 将显示与 Safari、Chrome 和其他所有浏览器相同的颜色。

- Pavel Evstigneev

---

这很好，但作为Web开发人员，我能做些什么？我发现我的网站在Chrome和FF中呈现不同的配置文件...是否有一种方法可以从CSS或元数据强制执行ICC配置文件？ - nZeus

@pavel，你还需要多做一步：将gfx.color_management.native_srgb设置为“true”。你发布的文章说：“不再需要更改任何高级配置以正确启用颜色管理。”然而，当我深入研究配置设置时，认为我可能已经调整了它们，在我作为英国色彩管理顾问的过去生活中！我发现我需要更改本地_srgb设置的布尔值。一旦我这样做了，文章提供的测试就完美地工作了。我仍然在处理ProPhotoRGB与sRGB测试的Chrome问题！ - Fishbite

Answer 6

Chrome的颜色选择器是通过从当前监视器颜色配置中获取颜色来工作的，当改变颜色设置或更换监视器时可能会出现问题，请查看以下方法以解决问题。

转到chrome://flags/#force-color-profile并单击“重置所有内容为默认值”

谢谢。

- Muthukrishnan

Answer 7

我在 OS X 中更改了颜色配置文件，问题得到解决。

请参见下面使用不同颜色配置文件的屏幕截图。需要注意的是，在这些截图中，我试图区分 #ff00ff、#ff1aff、#ff33ff 和 #ff4dff。只有当我选择非默认的 OS X 颜色配置文件时，才能正确地区分颜色。

默认的颜色配置文件： 使用其他颜色配置文件： 来源: CSS colors on OS X displaying correctly in Firefox but incorrectly in Safari and Chrome (potentially 'solved') 我发现 Safari 和 Chrome 无法区分 #ff00ff、#ff1aff、#ff33ff 和 #ff4dff。但 Firefox 可以。此外，X11 应用程序 Inkscape 也可以。但是 Gimp 和 Libreoffice Writer 这些非 X11 应用程序却无法。Firefox 和 X11 应用程序似乎在某种程度上使用了自己的颜色配置文件。

我不知道为什么 Mac 默认选择不能区分颜色的 Color LCD 颜色配置文件。

- mmm111mmm

Answer 8

在使用 Photoshop 导出 PNG 时，我在 Chrome（Lubuntu）上遇到了问题。解决方法是：文件 -> 另存为 -> 取消选中 "ICC 配置文件：Adobe RGB (1998)"。

- Zar