Question

我选择了一种我想在整个网站上使用的颜色 - 它是徽标和标题的颜色等等。就我而言，它是#7ed321。我创建了徽标，并将其导出为PNG，并剥去了颜色配置文件。

问题是，Firefox，Safari和Chrome中的页面看起来完全不同 - 每个页面都以自己的方式呈现颜色。

chrome

safari

firefox

Chrome，Safari和Firefox，从上到下。这是徽标和下面标题的一部分。它们在屏幕上看起来可能相同，但它们肯定不在我的屏幕上。

Chrome - 将标题和徽标都显示为原生#7ed321（sRGB #94C9D6）。
Safari - 将标题和徽标都显示为原生#54df16（sRGB #7ed321），绿色更亮。
Firefox - 将徽标呈现为原生#54df16（sRGB #7ED321），标头为原生#7ed321（sRGB #94C9D6）。所以颜色甚至不匹配。

基本上，如果我在PNG和我的CSS中要求#7ed321，Chrome会意识到我总是希望在屏幕上看到#7ed321，所以它会根据我的显示器进行必要的转换以转换为sRGB颜色配置文件

Safari假设我在sRGB中提供了两个值，因此它不会转换为我的目标监视器。

Firefox不对我的徽标进行转换，但会将我提供的CSS #7ed321转换为sRGB #94c9d6。

因此，同一页面在浏览器中看起来不一致。差异并不显着，但如果可以，我希望让他们看得更近。我可以对CSS / PNG做些什么来使页面看起来一样吗？

Answer 1

有一种方法可以确保代码中的徽标和品牌颜色的任何其他出现都是相同的。这是使用CSS为绿色的任何实例着色。

将徽标导出为具有透明背景的白色叶子。然后，您可以使用CSS形成徽标以创建圆圈并填充背景颜色。例如：

HTML

<div class="logo"></div>

CSS

.logo {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px; 
  background: #7ed321 url(../img/logo.png) center no-repeat;
}

现在代码已经应用了绿色，因此它将匹配您应用CSS的任何其他绿色，例如标题。

至于让所有浏览器和屏幕看起来都一样 - 那是一场失败的战斗。用户都使用不同的屏幕，颜色将以不同的方式呈现。毫无疑问，任何时候都会毫无意义地尝试做任何事情。

使用CSS构建徽标的替代方法是将徽标显示为字体。你可以这样做一个像Fontastic这样的工具，你可以根据需要调整徽标上的CSS过渡：http://fontastic.me/

Answer 2

如果您有图像的矢量版本，则可以使用svg格式。使用svg，您可以直接从标记访问stokes和fill的颜色十六进制代码。但问题可能与某些浏览器可以利用您的操作系统颜色配置文件有关，而其他浏览器则无法使用。

Answer 3

这是一个古老而糟糕的解决方案，但有时确保至少两个元素匹配的最佳方法是使用带有1像素png的css创建的框颜色，并使用与徽标相同的颜色设置导出