Фон кнопки появляется на 3% темнее, чем должно быть

Question

Я добавляю CSS в веб-приложение на основе Bootstrap, чтобы соответствовать PDF от дизайнера. Есть изображение кнопки, чей цвет фона Seashore сообщает как rgb(0,186,158) aka hsl(171,100,36%). Поэтому я установил цвет фона кнопки в соответствии с изображением:

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

Только ... это не так.

Вычитание 3% от светимости фиксирует это:

Я хотел бы знать, почему. Я не вижу никаких очевидных причин во всех других стилях CSS. Это происходит как в Chrome, так и в Firefox, на OS X Snow Leopard.

Я вижу нечто похожее с определенными шрифтами (сравнивая вывод веб-страниц с предоставленным PDF-файлом), но эта причина может быть разной.

EDIT

Оригинальное изображение. Надеюсь, SO не обработает его.

EDIT2

Зачем использовать PNG? Вот как дизайнер предоставил изображения. Я не знал, что существует компромисс с информацией о цветовом пространстве. Кроме того, я бы подумал, что PNG лучше для глифов, требующих плоских фонов и четких краев (по сравнению с JPEG), нет?

Answer 1

Это, скорее всего, цвет изображения PNG, который не отображается последовательно.

Изображение PNG не имеет информации о цветовом пространстве, вместо этого оно имеет гамма-значение, и существует проблема для интерпретации этого значения для определения цветового пространства. Вероятно, вы увидите, что между различными браузерами существует разница в цветах, поэтому, если вы настроите цвет того, как один браузер отображает PNG, он не будет соответствовать в других браузерах.

Используйте другой формат файла, если вам нужен цвет, соответствующий другим элементам, или сделайте фон PNG прозрачным вместо зеленого.

---

Рендеринг текста - это другое дело. Всегда будут незначительные различия в том, как браузеры отображают разные шрифты, в зависимости от используемого метода рендеринга, установленных шрифтов и настроек системы/пользователя. Вы просто не можете ожидать точно такого же результата в разных браузерах.