4

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. doesn't match

Subtracting 3% from the luminosity fixes it: does match

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. the original image

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?

Steve Bennett
  • 114,604
  • 39
  • 168
  • 219

1 Answers1

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.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Thanks very much - I had no idea PNGs behaved differently. Converting to a JPEG does indeed match perfectly. – Steve Bennett Apr 15 '13 at 09:30
  • @SteveBennett just use in photoshop tool "Save for Web" and choose PNG-24 – monkeyinsight Apr 15 '13 at 12:01
  • @monkeyinsight: I think that was intended as a comment in the question. Anyway, eventhough PNG-8 is limited to 256 colors, each color can still be any color in the 24-bit color range. The PNG-24 format still has the same color space problem that causes different browsers to render it differently. – Guffa Apr 15 '13 at 12:26