CSS-Tricks 的读者 Norm 写信询问我在他正在设计的新网站上遇到的颜色问题。
我有一个关于我的 测试网站 的图形问题。页眉和主页面背景来自同一张原始图形，在 Firefox 中，页眉和主体颜色相当匹配（我仍然需要做一些工作才能使图案更好地匹配），但在 Safari 中，页眉和主体之间的棕色阴影看起来完全不同，在它们交汇处形成了接缝。您是否知道如何在 Safari 中避免这些差异？
我在 Safari 和 Firefox 中都打开了它的网站，确实看到了同样的问题。以下是它们并排的截图。
看到照片下方和第一篇文章之前的颜色冲突了吗？糟糕。我的第一个想法是找到这两张图片，并在 Photoshop 中仔细查看它们。这是 页眉图片，这是 主体图片。看看当我将主体图片方块叠加到页眉图片上时会发生什么。
在右下方，您可以清楚地看到主体图片方块。这解释了 Safari 中发生的事情。这些图片显然具有不同的米黄色阴影，因此冲突是有道理的。那么 **究竟** 在 Firefox 中发生了什么？！它是否具有某种超级天才的颜色匹配能力？
Norm 提出要将创建页眉和主体图片的原始文件发送给我。我认为我会将这些实时图形文件与此文件进行比较，看看是否能发现任何信息。我打开了这个原始文件，并将主体背景方块叠加到上面，然后……
它完美匹配！嗯……所以看来，如果这两个文件最初都是从这个原始文件创建的，那么在导出顶部页眉图片时发生了一些事情，以某种方式改变了它的色调。我立即考虑了颜色索引。由于顶部图片处理的颜色种类更多，如果这些图片是颜色索引的，则顶部图片将有更少的颜色用于米黄色，这可以解释色调的变化。由于这两个图片都是 JPG 格式，而颜色索引仅适用于 GIF 和 PNG，因此情况并非如此。
然后我突然想到……
啊哈，是颜色配置文件！
我真应该马上想到这一点，但有时简单的答案是最难以捉摸的。我记得 Safari 是唯一几个真正 支持图片颜色配置文件 的浏览器之一。快速查看这两个图片的“获取信息”就能揭示真正的问题。
顶部图片确实以不同的方式导出，它使用的是“校准的 RGB 色彩空间”，而主体背景图片使用的是“sRGB”。这可能是由于以不同的方式从 Photoshop 保存图片造成的。如果您从文件菜单中“**另存为…**”，您将有机会保存颜色配置文件以及图片。如果您“**存储为 Web 所用格式与设备…**”，“sRGB”（最适合 Web）颜色配置文件将自动应用（至少在 CS3 中是这样）。
就是这样。并不是 Firefox 非常聪明，实际上它很笨，只是看起来很聪明。就像瑞茜·威瑟斯彭一样。
这些颜色配置文件的用途是我以后可以讨论的，但要记住避免像 Norm 遇到的问题，重要的是要确保所有图片都以相同的方式导出，因此它们要么没有颜色配置文件，要么都具有相同的颜色配置文件。这将确保网站（至少在颜色方面）在不同浏览器中呈现相同的效果。
要检查您的浏览器是否支持颜色配置文件（以及支持程度），请查看有关该主题的 ICC 页面。
太棒了。我很少使用我的 Mac，因为我大部分的日常工作都需要特定于 PC 的工具和 IE 兼容性（令我懊恼）。这是一个非常有用的调试工具。现在，如果我能说服世界放弃 IE，以便我们可以拥有原生 PNG 透明度……
此外，我以为只有我是瑞茜·威瑟斯彭的讨厌者……很高兴看到有志同道合的人。
好文章，但我遇到了类似的问题，似乎无法解决。我在一个使用 CSS 规则定义颜色的背景上有一个页眉图片。我在 Photoshop 中创建页眉图片时，使用与 CSS 相同的值来设置页眉的背景颜色，以便它能够融合在一起。
在 Firefox 中没有问题，在 Safari 中它们是不同的阴影。使用 OS X 中的 DigitalColor 计量应用程序，它告诉我它们是不同的颜色，即使它们都具有相同的值。
在这个例子中，您通过为两个图片提供相同的配置文件来解决它。因为我使用的是 CSS，所以我无法为它分配颜色配置文件。
有什么想法可以解决这个问题？
我遇到了同样的问题。
更糟糕的是，如果您访问 kuler.com 并输入一个十六进制值。
在 Chrome 和 Safari 中并排打开它，然后拾取颜色，然后它们显示不同的值。
即使我将其设为 255,0,0，Chrome 也能正确显示，但 Safari 读取为 251,0,24。
非常奇怪
太棒了。我从未想过这一点。我之前也遇到过完全相同的问题。感谢您的信息！现在，如果我能让 Explorer 与我合作就好了。
我最近也遇到过这个问题，除了我一直在以完全相同的方式导出所有内容。
嘿，Chris，你应该发布一些你设计的网站链接，以激励你所有的 CSS Tricks 学生。
哇。我不知道 Safari 支持颜色配置文件。非常有趣且有用，谢谢 Chris！
感谢您抽出时间回答这个问题，Chris，非常感谢！我将保留该页面一段时间作为示例，并在下周进行处理。
从您的帖子中学到了很多东西，再次感谢，
Norm
很棒的文章，Chris。有时，（看似）最简单的事情会给我们带来最大的问题……就像我们的工具决定在不知情的情况下尝试“帮助”我们一样。:)
优秀的文章。
我目前无法访问 Safari 或 IE 7 或 Firefox 以外的其他浏览器，但我听说过关于此的抱怨。
我将来一定会注意这些小错误。
是的，谢谢这个，也学到了教训！
谢谢！！很棒的提示！！
我对我的某些网站遇到过这个问题，感到困惑不解，但从未花时间解决它。只需在 Photoshop 中快速检查相同的十六进制颜色即可。你的帖子让我恍然大悟，并给了自己一巴掌。我应该知道的。
我非常确定你们中一些人遇到的问题是由于以下事实造成的，至少在 CS3 之前（对于可能拥有它的人来说，我没有），您必须在将图片存储为 Web 所用格式之前转换颜色配置文件为 sRGB。我使用的是 Photoshop CS，并且知道如果您不执行此特定步骤，假设您最初使用的是不同的颜色配置文件，则可能会出现一些奇怪的情况。
我不知道如何在 Photoshop 以外的其他编辑软件中实现这一点，但对于 PS 来说
图像 > 模式 > 转换为配置文件 …
请理解“转换为配置文件”和“分配配置文件”不会产生相同的结果。转换将尽可能保持您的颜色不变。
顺便说一句，我不认为你应该称 Firefox 为笨，或者 Safari 为聪明，因为它们以自己的方式渲染图像。我认为你可能会完全颠倒过来。Safari 的做法看起来更像是 IE 的风格，尽管它有着更合乎逻辑且肯定良好的意图。
为什么我们还要继续走浏览器以不同方式渲染相同内容这条徒劳无益的路呢？是的，我知道就配置文件而言，内容并不完全相同，但我很难找到一个理由说明这对网络很重要，尤其是在它会并且已经导致问题的情况下。
我看到的唯一使用颜色配置文件感知浏览器的用途是让人们了解颜色配置文件之间的差异。但是，这可以通过截图等方式来实现。
这只会导致更多的混乱和困难，而我认为我们已经接近于消除这些问题。我说，“Safari 变得很笨。”
您好，我在 Mozilla 工作，想让您知道我们已在 Firefox 3 中添加了颜色管理支持，该版本目前处于 Beta 阶段。我们希望关心网络颜色管理的人员测试 Firefox 3 Beta 并向我们提供反馈。请注意，默认情况下不会启用颜色管理，以防止细微的颜色变化影响网站的整体外观。要启用它，您必须将 gfx.color_management.enabled 设置为 true（通过 about:config）并重新启动 Firefox 3 Beta。
我刚刚启用了此设置，变化太大了……
颜色好多了！
我有一个绿色标题（png 图片）的问题，在 Firefox 中它的颜色更单调，而在 Safari 中则不然。在 Firefox 中开启颜色管理后，我得到了更鲜艳的颜色。
但当然，这并不能帮助所有查看我网站的人。
您好，Gen，
感谢您告知我们。我一直在玩 FF3，但我不知道它支持颜色配置文件。如果您想分享有关该主题的任何其他信息，请告诉我。
谁能告诉我为什么这对网络很重要？我支持颜色管理，但对于在网络上查看事物，我无法理解为什么这有必要。
我真诚地认为这是毫无意义的。至少我赞扬 Firefox 将默认值保持为 false。
感谢分享，非常有用。
@Brent：来自 Mozilla
是的，但这是一个罐头答案，并没有真正切中要害。我是一名摄影师，当然也了解颜色准确性的必要性。我只是说，就网络以及如何实现网络查看的颜色准确性而言，这毫无意义。网络应该有一个标准的颜色配置文件。拥有更多（等于没有标准）只会造成问题。
确保每个人都能看到正确的颜色不仅取决于支持 ICC 配置文件的浏览器，还取决于准确校准的显示器。在我们能够确保每个观看者的显示器都正确校准之前，它什么也解决不了。Firefox、Safari、Opera 如何做到这一点？
我认为我们需要一个标准。如果准备得当，颜色将是准确的。任何超出 sRGB 查看能力的关键内容，专业人士都不会依赖普通的网络查看。更有可能的是，任何关键内容都将通过 FTP 或甚至电子邮件发送。
感谢 Mozilla 的引用和您的时间，Chris，真诚地。我知道我并没有与您争论，所以请不要这样理解。我只是发布帖子看看是否有人有不同的看法。再说一次，我完全支持 ICC 配置文件和颜色准确性；我只是不相信这种特定方法是 WWW 的正确方法。
我认为你提出了一些非常好的观点，Brent。
网络可能永远无法校准人们显示器上的颜色，也不应该这样做。并且由于颜色配置文件只是颜色准确性拼图的一半，那么支持添加颜色配置文件的支持还有意义吗？使用一个标准化的颜色配置文件不是更有意义吗？我真的不知道答案。
“口红”的例子怎么样……一家口红公司可能会出售 100 种不同色调的红色口红，为了在线正确地做到这一点，他们真的需要尽可能准确地显示图像中的颜色。如果 sRGB 中没有完美的色调可以完成这项工作怎么办？使用更接近的颜色配置文件不是很好吗？但是，当有人使用不支持该颜色配置文件的浏览器时会发生什么？它会很好地降级到 sRGB 并“接近”……还是会完全偏离？
如果有一种方法可以确保带有颜色配置文件的图像“优雅地降级”，我就能看到颜色管理对网络来说非常棒，但在没有这种方法的情况下，它会非常成问题。此外，这确实应该仅用于“产品拍摄”或“颜色样本”，而不是用于构成页面设计的图像。正如我们在本文中看到的，用于实际页面设计的图像应该构建为尽可能广泛的标准。
感谢您的想法，Chris。我觉得支持 ICC 配置文件的浏览器可能确实有很好的用途，但目前对我来说仍然有点难以捉摸。我们将拭目以待……
哇，谢谢，我从未想过。非常有帮助。
嘿，Chris，
关于校正图像和 CSS 之间的颜色有什么想法/技巧吗？我有一张图像应该与背景融合，但 Safari 会改变图像颜色。我在 PS CS3 中检查过，颜色配置文件是 sRGB。不确定发生了什么，但这让人非常恼火。在 PS 中，源图像和屏幕截图的十六进制代码相同，但视觉上明显不同。
感谢您的帮助，
georges
@georges：您是否检查了两个图像以确保它们都是 sRGB，而不仅仅是一个？如果您有出现问题的 URL，我相信我们可以解决它。
Chris，感谢您的快速回复。事实证明，GammaSlamma 解决了这个问题。我想我的 PNG 中嵌入的伽马校正导致了这个问题，而不是颜色空间问题。
我认为我的问题是 PNG 特定的。我发现了很多关于网络颜色管理的页面，并且 PNG 被单独列为存在问题。
对于偶然遇到这篇文章和这些评论的其他任何人，您可以在以下网址获取 gammaslamma：http://www.shealanforshaw.com/。或者，对于 Linux 和 Windows 机器，请谷歌搜索 PNGCrush。
希望这对某人有所帮助，
georges
感谢这篇文章。我遇到了完全相同的问题，但现在一切都好了。
一篇有趣的文章，确实让我走上了正确的方向，但尝试将图形与 CSS 背景相同的颜色匹配对我来说失败了，即使在将校样设置设置为 Windows 或自定义 sRGB 以及在“存储为 Web 和设备”中选中“转换为 sRGB”的各种组合之后也是如此。但是，关闭 ICC 配置文件确实有效——我以为这是为了标准化所有内容？
这是一篇很棒的文章。我在 CS3 中创建了一个 jpg，其背景颜色与我在 CSS 代码中设置的颜色相同。在 Safari 中，它们根本不匹配。感谢您的帮助。
很棒的文章！我在 Safari 和 Firefox 之间渲染图像时遇到了类似的问题，只是相反。Safari 渲染了一张色彩鲜艳的图片，而 Firefox 显示的是一些相当暗淡的东西。这篇文章真的帮助我解决了这个问题。非常感谢！
我最近也遇到了这个问题，我将所有导航图像都存储为 Web 格式，并且不得不对其中一个进行简单的更改并改为另存为，只有在 Safari 下查看时才发现问题。
很棒的文章！
我将回应我上面评论者的观点：我无法关闭 Safari 的颜色配置文件超级功能这一事实让我感到沮丧，而不是兴奋，这个功能让我感到沮丧。
作为渐变炒作的受害者，我想念能够在主体中放置一个与渐变背景图像匹配的十六进制代码，而无需担心 Safari。关闭 ICC 对我无效——相反，我采用了为渐变创建一个包装器的方法，然后在主体中放置一个非常小的重复背景图像，该图像为预期的背景颜色。显然，这远不如拥有一个背景图像及其十六进制代码那样简洁明了。
一定还有其他方法可以解决这个问题！
哦，天哪，太感谢了！这今天都快把我逼疯了，非常有用的文章。我甚至开始以为这根本没法解决，没想到解决方案这么简单。
再次感谢。
谢谢 :D 我遇到了这个问题，多亏了你，我解决了 :)
我在 Safari 和 Firefox 中发现 JPG 和 PNG 之间有一些差异。我打开了一个 JPG 文件并将其另存为 PNG，然后它就正常工作了。一开始我这样做：矢量 => PNG（Safari != Firefox 问题）=> JPG（Safari != Firefox 问题），现在是矢量 => JPG => PNG（没有问题）
谢谢 ;)
抱歉我的英语…… ;) 希望你能理解我 ;)
哇，非常感谢这篇文章。它及时救了我！我正要将 Mac 扔出窗外……
谢谢！太棒了。哇。我对此疑惑了很久。
非常感谢这篇文章。我一直在苦苦思索为什么我的渐变标题在 IE 和 Firefox 中完美显示，但在 Safari 中却不行。果然，我为应该匹配的元素使用了不同的颜色配置文件。都解决了：http://www.wiretotheear.com
我遇到过这个问题好几次了，但我的问题是我不使用 Photoshop，我使用 GIMP（因为我穷，呜呜）。有人知道如何在 GIMP 中创建没有颜色配置文件的图像吗？
不仅仅是 JPEG。PNG 也有类似的问题，它们嵌入了“Gamma”。
谢谢！你的帖子解决了我在我的博客中尝试使用的某个新主题遇到的问题，但我仍然遇到其他一些问题 :(
太棒了！非常感谢。
Jerry
我在 IE 7 中也遇到了渲染不正确的问题，而 Firefox 看起来很棒。你的帖子帮助我解决了它。谢谢！！！
哦，我的天哪，感谢你发布这篇文章。我今天第一次遇到这个问题，当时我心想，“好吧，我今天半天时间都要花在追踪这个完全奇怪问题的解决方案上了。”幸运的是，我首先看到了这篇文章……感谢你写下它！
这帮了我很大的忙。谢谢！
对所有 JPEG 和 PNG 使用 ImageOptim 删除颜色配置文件。问题解决，更不用说优化 PNG 文件了，因为 Adobe 创建的 PNG 文件非常臃肿。