Button background appears 3% darker than it should be

Question

I'm adding CSS to a Bootstrap-based web app, to match a PDF from a designer. There's a button image, whose background color Seashore reports as rgb(0,186,158) aka hsl(171,100,36%). So I set the background colour of the button to match the image:

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

Only...it doesn't.

Subtracting 3% from the luminosity fixes it:

I'd love to know why. I can't see any obvious causes in all of the other CSS styles applied. This happens in both Chrome and Firefox, on OS X Snow Leopard.

I'm seeing something similar with certain fonts (comparing the web rendered output with a provided PDF), but that cause could be different.

EDIT

Here's the original image. Hopefully SO doesn't process it.

EDIT2

Why use PNG? That's how the designer provided the images. I wasn't aware that there was a trade-off with color space information. Also, I would have thought that PNGs are better for glyphs needing flat backgrounds and crisp edges (compared to JPEGs), no?

Answer 1

It's most likely the color of the PNG image that is not displayed consistently.

A PNG image doesn't have color space information, instead it has a gamma value, and there is a problem to interpret that value to determine a color space. You will probably see that there is a color difference between different browsers, so if you adjust the color for how one browser displays the PNG, it won't match in other browsers.

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

---

Rendering text is a different matter. There will always be slight differences in how browsers renders different fonts, depending on the rendering method used, which fonts are installed, and system/user settings. You simply can't expect exactly the same result in different browsers.