The button background appears 3% darker than it should be

Question

I am adding CSS to a Bootstrap based web application to match the PDF from the designer. There is an image of a button whose background color Seashore reports as rgb(0,186,158) aka hsl(171,100,36%) . Therefore, I set the background color of the button according to the image:

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

Only ... it is not.

Subtraction of 3% from luminosity fixes it:

I would like to know why. I see no obvious reason in all other CSS styles. This happens in both Chrome and Firefox, on OS X Snow Leopard.

I see something similar with certain fonts (comparing the web rendering output with the provided PDF file), but this reason may be different.

EDIT

Here is the original image. Hopefully SO won't handle it.

EDIT2

Why use PNG? This is how the designer provided the images. I did not know that there was a compromise with information about color space. Also, I would think PNG is better for glyphs requiring flat backgrounds and sharp edges (compared to JPEG), no?

Answer 1

Most likely, the color of the PNG image is not displayed sequentially.

The PNG image has no color space information, instead it has a gamma value, and there is a problem for interpreting this value to determine the color space. You will probably see that there is a color difference between different browsers, so if you adjust the color of how one browser displays PNG, it will not match in other browsers.

Use a different file format if you need a color that matches the other elements, or make the PNG background transparent instead of green.

---

Text rendering is another matter. There will always be slight differences in how browsers display different fonts, depending on the rendering method used, installed fonts and system / user settings. You simply cannot expect the exact same result across browsers.