Html 如何使同一颜色在不同浏览器中看起来相同？

我已经挑选了一种我想在整个网站上使用的颜色——logo和header的颜色，以及其他颜色。在我的例子中，它是

#7ed321

。我已经创建了徽标，并将其导出为PNG格式，去掉了颜色配置文件

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

Chrome、Safari和Firefox，自上而下。这是下面的徽标和标题部分。它们在你的屏幕上看起来可能一样，但在我的屏幕上肯定不一样

• Chrome-将标题和徽标呈现为本机

  #7ed321

  （sRGB

  #94C9D6

  ）
• Safari-将标题和徽标呈现为本机

  #54df16

  （sRGB

  #7ed321

  ），更亮的绿色
• Firefox-将徽标呈现为本机

  #54df16

  （sRGB

  #7ED321

  ），标题呈现为本机

  #7ED321

  （sRGB

  #94C9D6

  ）。所以颜色根本不匹配

基本上，Chrome意识到，如果我在PNG和CSS中要求使用

#7ed321

，我总是希望在屏幕上看到

#7ed321

，因此它会进行必要的sRGB转换，以匹配显示器的颜色配置文件

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

Firefox不会转换我的徽标，但会将我提供的CSS转换为sRGB

\94c9d6

---

因此，相同的页面在浏览器之间看起来不一致。差别不大，但如果可以的话，我想让他们看得更近一些。我可以对我的CSS/PNG做些什么来使页面看起来相同吗？

有一种方法可以确保徽标和代码中出现的任何其他品牌颜色是相同的。也就是说，使用CSS将任何实例涂成绿色

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

HTML

现在，代码已经应用了绿色，因此它将与您使用CSS（如页眉）应用的任何其他绿色匹配

至于让所有浏览器和屏幕看起来都一样，这是一场有点失败的战斗。用户都使用不同的屏幕，颜色将呈现不同。老实说，花任何时间试图做任何事情都是毫无意义的

---

使用CSS来构建这样的徽标的另一种方法是将徽标显示为字体。您可以使用像Fontastic这样的工具来实现这一点，该工具允许您根据需要在徽标上进行大小调整和冷却CSS转换：

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

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

加载页面时，我看到了不同之处，但加载完成后，我将它们并排放在Firefox和Chrome上。我看不出有什么大的不同，除非你的意思是不同的绿色。但至少对我来说，它们看起来是一样的？你试过在CSS中使用RGBA而不是十六进制代码吗？i、 背景色：rgba（126、211、33、1）；TBH，您正在进行一场较小的战斗，因为上面图像的浏览器之间的细微色差与您将在成千上万个不同显示器上看到的巨大色差相比是微小的，这些显示器具有不同的设置、颜色和色调、对比度等

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

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