SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    Graphic Colors Don't Match

    I'm redesigning my website and having issues making some of the colors match from multiple graphics. My logo doesn't seem to match the border graphic that I've used for my website. It looks fine on both of Mac and PC but *some* other people see the graphics differently. I've been told that the border graphic looks more orange but the logo graphic still appears red (it's supposed to be red).

    My new website is: http:// new . newalliancemarketing . com

    I've attached the graphics to this thread as well.

    Does the red in each graphic appear the same to you or does the border graphic look more orange?
    Why would these graphics appear different on some computers but the same on others?
    Is there a way for me to set a color profile on the graphic to make it more true?
    Attached Images Attached Images
    TAKE A WALK OUTSIDE YOUR MIND.

  2. #2
    SitePoint Member
    Join Date
    Sep 2009
    Location
    Anchorage, Alaska
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The colors do look different on my computer.

    I would take the image into PhotoShop or another program that has a color picker and match the colors. Also, if you put two colors next to each other, they "appear" to not match.

  3. #3
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    The strange part is that they do match for me so when I open them both in Photoshop and attempt to match the colors with the picker there is no difference.

    I've attached a screenshot of the website in my browser.

    So I guess that's back to my question - what would make these graphics match/not match depending on the computer?
    Attached Images Attached Images
    TAKE A WALK OUTSIDE YOUR MIND.

  4. #4
    SitePoint Member
    Join Date
    Sep 2009
    Location
    Anchorage, Alaska
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is an age-old problem Web developers have had. We can only get approximate what our colors & layouts will look like. Colors often appear different across browsers and computer monitors. It is impossible to get the same colors schemes to match across all computers unless you stick to black and white designs.

    Alaska Web Design Site
    Alaska Web Design Blog
    WordPress Alaska Web Design Blog

  5. #5
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Alaska, thanks for your help. But I guess I'm not phrasing my question correctly...

    I understand that my red will look different on different computers. It even looks different on the same computer while using a different browser. However, what I don't understand is why two different graphics will match on one computer and not match on another. There has to be a fundamental difference between the makeup of those two graphics for one to change and the other to stay the same.

    They're both RGB graphics (in Photoshop) and saved as PNG files. Is there something else I should be checking for?
    TAKE A WALK OUTSIDE YOUR MIND.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Location
    Louisville, KY
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hyperbolik,

    I dont know if this will help but I have had this issue as well, but noticed I can look at one image and say its 800 pixels tall and it will be the same color/ gradient all the way down and depending on where you are looking on the image it appears to be different colors. That was more of a monitor issue.

    Like I said, I don't know if that's your case, but if you are looking at the 2 images on top of each other, it might be.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This may be a colour profile thing. PNGs often have the working color profile embedded in them, which your browser then faithfully renders.
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  8. #8
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by raena View Post
    This may be a colour profile thing. PNGs often have the working color profile embedded in them, which your browser then faithfully renders.
    Is there a way to check or change the color profile of a PNG using Photoshop?
    TAKE A WALK OUTSIDE YOUR MIND.

  9. #9
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the little right-pointing arrow at the bottom of the window, whose name I forget, use Show > Document Profile.

    You can also see the current profile under Edit > Assign Profile, which also lets you change it at this point.

    If you use a Mac you can also see the profile under Get Info.

    I honestly am not a big expert on this stuff but I do know that if I stick to the sRGB profile for everything, then they all match and it's cool.
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  10. #10
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    raena,

    You are amazing. This was it - the color profiles were different. Thank you so much!!!
    TAKE A WALK OUTSIDE YOUR MIND.

  11. #11
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  12. #12
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've noticed the same problem when using the "Save for Web" feature in the creative suite software products. I was able to solvethe issue by making sure that the checkbox labeled "ICC Profile" is left unchecked. I believe that Safar browsers support that color profile (and maybe others) bt Firefx did not support it, thus leaving a slight difference between similar colors and their edges. So, some color profiles on the web may be a bad thing.
    Todd Temple > T2 Design

  13. #13
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it's better to avoid the problem entirely and strip them, perhaps From memory I believe that is one of several things pngcrush removes to make your pngs a bit more bite-sized.
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.


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
  •