按钮背景显示比应有的暗3％

Question

我正在将CSS添加到基于Bootstrap的Web应用程序，以匹配设计人员的PDF。有一个按钮图像，其背景颜色Seashore报告为rgb(0,186,158)又名hsl(171,100,36%)。所以我设置按钮的背景颜色以匹配图像：

background-image: url('images/elements/small-search-button-up.png');
background-color: hsl(171,100%,36%);

只有...它没有。

从光度中减去3％修正了它：

我很想知道原因。在所有应用的其他CSS样式中，我都看不到任何明显的原因。在OS X Snow Leopard上，Chrome和Firefox都会发生这种情况。

我看到类似于某些字体的东西（将网页渲染的输出与提供的PDF进行比较），但原因可能不同。

修改

这是原始图片。希望SO不会处理它。

EDIT2

为什么要使用PNG？这就是设计师提供图像的方式。我不知道有关色彩空间信息的权衡。另外，我认为PNG对于需要平坦背景和清晰边缘的字形更好（与JPEG相比），不是吗？

Answer 1

很可能PNG图像的颜色不能始终如一地显示。

PNG图像没有颜色空间信息，而是具有伽玛值，并且存在解释该值以确定颜色空间的问题。您可能会看到不同浏览器之间存在颜色差异，因此如果您调整一个浏览器显示PNG的颜色，则在其他浏览器中不会匹配。

如果您需要与其他元素匹配颜色，请使用其他文件格式，或者使PNG的背景透明而不是绿色。

---

渲染文字是另一回事。浏览器渲染不同字体的方式总会略有不同，具体取决于使用的渲染方法，安装的字体以及系统/用户设置。你不能指望在不同的浏览器中得到完全相同的结果。