Hex codes & pngs (& other pngs) don't match :(

[The Puglet]

After much googling and even more confusion, I'm just going to ask...

What's going wrong here? More important: how do i fix it so all the colors match each other? (without resorting to websafe colors palette).


http://frolicphoto.com/header


I cut up my design in Pshop (yeah, I know, old school), saved for web and things looked fine on my PC.... not so fine here on my mac (FF + Safari). I have no idea why one png's green (in the dog logo) retained its nice greenery, but the other png's green (top edge above nav) looks anemic. The green's hex code also appears anemic.

How can I make it all match? Even better, can I do something in CSS to make it all match *and* not be anemic?

I'm trying to understand, but pretty new to this & very frustrated.

THANKS

 

[chicagodunn]

help

#a3c148 is the codes for the green under the logo text
#b3c954 is the green for where the menu items show up

edit this line in your css
#menu.orange {background: #b3c954;}

to

#menu.orange {background: #a3c148;}

See if that changes it.


Also "4.png" will need to be re-colored to match the other two segments.

 

[Dana Beck]

Lock down the green color when exporting the slices

If exporting as a gif or png (and this flat-color image should be), just use the color swatches in the export dialog, in either PS or Fireworks, to lock the green color swatch. Then it (hex color) won't shift on you.

 

[thirdkind]

PNG color profiles are likely to blame. Some browsers support color profiles, and if the gamma is off, you'll get discrepancies in color appearance even if the hex values are the same when saved.

Get yourself an app like imageOptim to post-process your PNGs and strip out unnecessary color profile info.

 

[The Puglet]

#a3c148 is the codes for the green under the logo text
#b3c954 is the green for where the menu items show up

That's what's confusing me. In the .psd, there was only one green value for everything (#b3c954) so the hex in the CSS matches the hex of the green under logo. I'll try your fix when I get home tonight, but now I'm even more confused than I was before.

As for PNGs and color shifts, I get that (sort of). What I *don't* get is why I got 2 different PNG behaviors from a single "Save for web" export (bright green in logo/anemic in top edge of nav).

Thanks!

 

[The Puglet]

If exporting as a gif or png (and this flat-color image should be), just use the color swatches in the export dialog, in either PS or Fireworks, to lock the green color swatch. Then it (hex color) won't shift on you.

Good to know. But my problem (one of them anyway) is with a hard-coded hex.

 

[turbobass]

Good to know. But my problem (one of them anyway) is with a hard-coded hex.

Having the PNG issue too in Chrome. It's really weird because it shows up fine in Chrome on my iMac but on a tower w/Dell monitors they don't match. I am going to try and strip this profile data out using one of the suggested methods here.

Did you ever find out if removing the PNG metadata worked? Or how to fix your hexes (I'm guessing you just had the wrong value in there for the hex-hex difference?)