SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,728
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)

    matching colors: photoshop and firefox.

    This is odd. I have some PNG-24s I like to use for rounded corner/organic effects. They look fine in Safari, Chrome, even IE ( tho the edges become a little frayed, but barely noticeable). On FF, the transparency still works fine but the colors dont match. For example, if I make a box with rounded corners, then match the background color of the content area to the hex value of the PNG graphics used to make the rounded corners FF gives me a difrent shade for the corners and the content area.

    I have also tried using RGB values, but i got exactly the same result. Safari, IE, Chrome, and opera match the colors just fine.

    Has anyone experienced any problems color matching with PNGs cross browsers? Do you need to use a special setting in photoshop when saving to web so that the colors match? I am at a loss.

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There was a change in the color matching within Firefox recently. Which version are you using?

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Strip out Gamma Correction portion from the PNG
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,728
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    am using FF3.

    Logic_earth,
    the gamma ide sounds interesting. where can I find the gamma info on a PNG?

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,728
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU .. Logic_earth! I will give those a try

  7. #7
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to read this and (maybe) this.

  8. #8
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    ^^^ Color Profiles is off by default in Firefox, just FYI.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Location
    Texas
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like the color is changing in compression, lower the compression.

  10. #10
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    ^^^ PNG uses lossless compression, it won't affect colors.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  11. #11
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Location
    Texas
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PNG is only lossless when you turn off compression. By definition, if you compress an image at all, that is not lossless, because the image you save is not the same as the original.

    From Wikipedia: "This method is combined with prediction, where for each image line, a filter method is chosen that predicts the color of each pixel based on the colors of previous pixels and subtracts the predicted color of the pixel from the actual color."

    Predicting colors (during compression or decompression) you won't always get an exact match, especially if you bump up compression, but you might get lucky some of the time. Firefox could be using a different decompression algorithm.

    Also, I'm wondering what you're trying to match the image against, some CSS background color you created, another image?

  12. #12
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a similar issue. Try this method. At least, it works for me. http-//www-viget.com/inspire/the-mysterious-save-for-web-color-shift/

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i had some kind the same issue
    the color didnt match in safari for mac, however in every other browser it did work.

    i was working in photoshop CS2
    so i fixed it, saving it from CS3....i have no idea what it does, but it worked at the end!
    - Inelastica.com | Cultura Grafica (spanish design blog)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •