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

Discussion in 'Web Design and Development' started by The Puglet, Jun 29, 2010.

  1. The Puglet macrumors newbie

    Jun 29, 2010
    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).


    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.

  2. chicagodunn macrumors newbie

    Jun 30, 2010

    #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;}


    #menu.orange {background: #a3c148;}

    See if that changes it.

    Also "4.png" will need to be re-colored to match the other two segments.
  3. Dana Beck macrumors member

    Dana Beck

    Jun 13, 2010
    Blackwell, OK
    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.
  4. thirdkind macrumors member

    Oct 20, 2005
    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.
  5. The Puglet thread starter macrumors newbie

    Jun 29, 2010
    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).

  6. The Puglet thread starter macrumors newbie

    Jun 29, 2010
    Good to know. But my problem (one of them anyway) is with a hard-coded hex.
  7. turbobass macrumors 6502

    May 25, 2010
    Los Angeles
    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?)

Share This Page