Colours on a mac browser

I set up my BP Social theme options to include an image/logo for my site on the header.
The image is made in a specific "hex" colour and I have set the header of the theme to the same "hex" colour, so that the header and the image backround appear seemless.

I have viewed this on my windows laptop with various browsers and it looks fine, however I saw it using a Mac this week and the you can clearly see that the header and the image are two different colours.

How can this be?

  • rossagrant
    • The Incredible Code Injector

    @hkcharlie attempts to match the background color of an HTML page to a particular color in a GIF can prove difficult because GIF and HTML colors may not match in all browsers. Are you using a GIF by any chance? If so keep reading.

    One example of this issue occurs when using websafe colors in monitors that display at "thousands of colors". Websafe colors must shift slightly when viewed on such a monitor, and a browser's HTML renderer and its GIF renderer may shift these colors in slightly different ways. Colors which have the same hex value may look different on some systems.


    Why would there be a shift? A monitor set to "thousands of colors" uses 16 bits, or two bytes, to describe the color of each pixel. This is 5 bits each for the red, green, and blue information -- there are 32 distinct values for each RGB channel. The websafe colors have 6 distinct values for each RGB channel (00, 33, 66, 99, CC, FF). These 6 websafe values won't distribute evenly among the 32 available values on that monitor, and so each renderer must shift some colors a little bit in some cases.


    The following two techniques are often used to make a GIF appear to blend into the background and to render almost the same across browsers:

    Try removing the background of the GIF by making it a transparent GIF. This gives an irregular outline to the graphic, and color shifts won't be as noticeable as with a boxy image.

    You can also try using a JPEG image as this will alter the colour compression and may solve your problem.

    Let us know how you get on!

  • rossagrant
    • The Incredible Code Injector

    Yeah that probably came across wrong. I was referring to rendering a PNG completely transparent e.g. if you designed a logo which was text based in say photoshop it's very easy to export it with a trasparent background.

    What I tend to see is people using text AND an image which often contains a background colour and upon exporting this to a transparent png they get the text with no background and then an image which still contains it's original background colour bolted onto it which again can cause issues on colour matching.

    Where I can I always design logos incorporating both transparent images and text as then I never have to match background colours as the entire logo exports without a background.

    Suppose it depends on people's ability with a graphics program. I find that a lot of the companies online that supply images such as shutterstock etc seem to lack in transparent pngs too which needs addressing really. All their images seem to come with backgrounds, even the illustrations which could often be incorprated into a logo. This means you have to cut the background out in photoshop, but not everyone would be comfortable doing that.

  • Tammie
    • WordPress Wizard

    @rossagrant: The reason most do that is image replacement due to ie 6 but since that isn't on cards anymore it's less common. For best results use to be fair but you can always remove a background easily particularly in anything above CS3 for Photoshop.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.