Matching colours between a .png and background

Discussion in 'HTML' started by patrick j, Mar 7, 2007.

  1. patrick j

    patrick j Guest

    Hi

    I'm wondering a bit about an inconsistency between colours matching on a
    web-site I'm working on.

    As a demonstration I've created an ultra simple HTML page containing a .png
    image.

    The image is at the top right of the page. The body element of the page has
    a background colour which should be the same but only seems to be on some
    web-browsers.

    The URL is:

    <http://www.patrickjames.me.uk/colourtest.html>

    Don't forget that in the UK we spell colour with a u. We do this because we
    like being awkward.

    The actual colour of the image and the background has the following
    red/green/blue values:

    rgb(0%, 25.1%, 50.2%)

    Viewed with Safari and iCab the colours match perfectly and so the image
    can not be seen. However viewed with FireFox and IE 7 the colour of the
    image is lighter than that of the background. Viewed with IE 6 a white-ish
    line appears around the .png.

    So, my question is: how do I get the colours to match in all browsers?

    Thank you :)
    --
    Patrick
    Brighton, UK
    If you wish you can email me from web-site.
    <http://www.patrickjames.me.uk>
     
    patrick j, Mar 7, 2007
    #1
    1. Advertising

  2. patrick j wrote:
    > Hi
    >
    > I'm wondering a bit about an inconsistency between colours matching on a
    > web-site I'm working on.
    >
    > As a demonstration I've created an ultra simple HTML page containing a .png
    > image.
    >
    > The image is at the top right of the page. The body element of the page has
    > a background colour which should be the same but only seems to be on some
    > web-browsers.
    >
    > The URL is:
    >
    > <http://www.patrickjames.me.uk/colourtest.html>
    >
    > Don't forget that in the UK we spell colour with a u. We do this because we
    > like being awkward.
    >
    > The actual colour of the image and the background has the following
    > red/green/blue values:
    >
    > rgb(0%, 25.1%, 50.2%)
    >
    > Viewed with Safari and iCab the colours match perfectly and so the image
    > can not be seen. However viewed with FireFox and IE 7 the colour of the
    > image is lighter than that of the background. Viewed with IE 6 a white-ish
    > line appears around the .png.
    >
    > So, my question is: how do I get the colours to match in all browsers?


    It it is 32-bit but only 3 colors, reduce the the palette and your get
    RGB of 0,64,128 and if you set the background to rbg(0,64,128) it
    matches just fine...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 7, 2007
    #2
    1. Advertising

  3. patrick j

    dorayme Guest

    In article
    <>,
    patrick j <> wrote:

    > <http://www.patrickjames.me.uk/colourtest.html>
    >
    >
    > Viewed with Safari and iCab the colours match perfectly and so the image
    > can not be seen. However


    Actually Patrick, this is not true. It is much harder to see in
    Safari, that is true. But it can be seen. Not on any old monitor
    or especially old CRT but on a high quality newish LCD. JL has
    suggested stuff so I won't say more about how to fix.

    --
    dorayme
     
    dorayme, Mar 7, 2007
    #3
  4. patrick j

    Nik Coughlin Guest

    patrick j wrote:
    > Hi
    >
    > I'm wondering a bit about an inconsistency between colours matching
    > on a web-site I'm working on.
    >
    > As a demonstration I've created an ultra simple HTML page containing
    > a .png image.
    >
    > The image is at the top right of the page. The body element of the
    > page has a background colour which should be the same but only seems
    > to be on some web-browsers.


    Use tweakpng to remove the gama chunk. This will fix the inconsistency in
    IE.

    http://entropymine.com/jason/tweakpng/
     
    Nik Coughlin, Mar 7, 2007
    #4
  5. patrick j

    patrick j Guest

    On Mar 7, 2007 Jonathan N. Little wrote:

    > patrick j wrote:
    >
    >> The URL is:


    [...]

    >> <http://www.patrickjames.me.uk/colourtest.html>


    [...]

    >> So, my question is: how do I get the colours to match in all browsers?

    >
    > It it is 32-bit but only 3 colors, reduce the the palette and your get
    > RGB of 0,64,128 and if you set the background to rbg(0,64,128) it
    > matches just fine...


    Thank you for your help. I'm wondering how I reduce the palette? I'm using
    GraphicConverter on a Mac.

    I've changed the background to rgb(0,64,128).

    I'm probably being very stupid :)



    --
    Patrick
    Brighton, UK
    If you wish you can email me from web-site.
    <http://www.patrickjames.me.uk>
     
    patrick j, Mar 8, 2007
    #5
  6. patrick j

    patrick j Guest

    On Mar 7, 2007 dorayme wrote:

    > In article
    > <>,
    > patrick j <> wrote:
    >
    >> <http://www.patrickjames.me.uk/colourtest.html>
    >>
    >>
    >> Viewed with Safari and iCab the colours match perfectly and so the image
    >> can not be seen. However

    >
    > Actually Patrick, this is not true. It is much harder to see in
    > Safari, that is true. But it can be seen. Not on any old monitor
    > or especially old CRT but on a high quality newish LCD. JL has
    > suggested stuff so I won't say more about how to fix.
    >
    >


    Hi dorayme.

    Being a Mac user you might know how I do Jonathan's instruction on my
    computer.

    He writes:

    > It it is 32-bit but only 3 colors, reduce the the palette and your get
    > RGB of 0,64,128 and if you set the background to rbg(0,64,128) it
    > matches just fine...


    Okay, so I've changed background to rgb(0,64,128) in the style-sheet, but
    how do I reduce the palette of the image?

    I'm using GraphicConverter.

    Thank you :)

    --
    Patrick
    Brighton, UK
    If you wish you can email me from web-site.
    <http://www.patrickjames.me.uk>
     
    patrick j, Mar 8, 2007
    #6
  7. patrick j wrote:
    > On Mar 7, 2007 Jonathan N. Little wrote:
    >
    >> patrick j wrote:
    >>
    >>> The URL is:

    >
    > [...]
    >
    >>> <http://www.patrickjames.me.uk/colourtest.html>

    >
    > [...]
    >
    >>> So, my question is: how do I get the colours to match in all browsers?

    >> It it is 32-bit but only 3 colors, reduce the the palette and your get
    >> RGB of 0,64,128 and if you set the background to rbg(0,64,128) it
    >> matches just fine...

    >
    > Thank you for your help. I'm wondering how I reduce the palette? I'm using
    > GraphicConverter on a Mac.
    >
    > I've changed the background to rgb(0,64,128).
    >
    > I'm probably being very stupid :)
    >
    >
    >


    Don't know but generally in PhotoShop, I use Photo-paint it is located
    under the "Image" menu and look for "Color Mode", or "Color Depth" then
    switch from 32-bit CYMK to to an RGB model either 24-bit RGB or in
    your case 8-bit Palette is more that sufficient. Of course is your use
    GIF format here it will automatically switch you to 8-bit Palette
    because that is all that the format can support!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #7
  8. patrick j

    patrick j Guest

    On Mar 8, 2007 Jonathan N. Little wrote:

    > Don't know but generally in PhotoShop, I use Photo-paint it is located
    > under the "Image" menu and look for "Color Mode", or "Color Depth" then
    > switch from 32-bit CYMK to to an RGB model either 24-bit RGB or in
    > your case 8-bit Palette is more that sufficient. Of course is your use
    > GIF format here it will automatically switch you to 8-bit Palette
    > because that is all that the format can support!


    Thank you. I think I'll be able to work it out from this. I'm certain I've
    seen the way to do this in GraphicConverter but not needed it before, so I
    just have to revisit that.

    I think that .png looks better than .gif, but I could just be imagining it
    :)

    --
    Patrick
    Brighton, UK
    If you wish you can email me from web-site.
    <http://www.patrickjames.me.uk>
     
    patrick j, Mar 8, 2007
    #8
  9. patrick j wrote:
    > On Mar 8, 2007 Jonathan N. Little wrote:
    >
    >> Don't know but generally in PhotoShop, I use Photo-paint it is located
    >> under the "Image" menu and look for "Color Mode", or "Color Depth" then
    >> switch from 32-bit CYMK to to an RGB model either 24-bit RGB or in
    >> your case 8-bit Palette is more that sufficient. Of course is your use
    >> GIF format here it will automatically switch you to 8-bit Palette
    >> because that is all that the format can support!

    >
    > Thank you. I think I'll be able to work it out from this. I'm certain I've
    > seen the way to do this in GraphicConverter but not needed it before, so I
    > just have to revisit that.
    >
    > I think that .png looks better than .gif, but I could just be imagining it
    > :)
    >

    Should not make a difference in a paletted <=256 colors... In your case
    1 color. In such situations I find GIF small file size than PNG.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #9
  10. patrick j

    Andy Dingley Guest

    On 7 Mar, 16:55, patrick j <> wrote:

    > Don't forget that in the UK we spell colour with a u. We do this because we
    > like being awkward.


    Actually we do it because in medieval England it was pretentious to
    pretend to be French, whereas in 19th century America it was
    pretentious to pretend to be Roman.

    <http://en.wikipedia.org/wiki/
    American_and_British_English_spelling_differences#-our_.2F_-or>
     
    Andy Dingley, Mar 8, 2007
    #10
  11. patrick j

    Neredbojias Guest

    On Thu, 08 Mar 2007 12:45:28 GMT patrick j scribed:

    > On Mar 7, 2007 dorayme wrote:
    >
    >> In article
    >> <>,
    >> patrick j <> wrote:
    >>
    >>> <http://www.patrickjames.me.uk/colourtest.html>
    >>>
    >>>
    >>> Viewed with Safari and iCab the colours match perfectly and so the
    >>> image can not be seen. However

    >>
    >> Actually Patrick, this is not true. It is much harder to see in
    >> Safari, that is true. But it can be seen. Not on any old monitor
    >> or especially old CRT but on a high quality newish LCD. JL has
    >> suggested stuff so I won't say more about how to fix.
    >>
    >>

    >
    > Hi dorayme.
    >
    > Being a Mac user you might know how I do Jonathan's instruction on my
    > computer.
    >
    > He writes:
    >
    >> It it is 32-bit but only 3 colors, reduce the the palette and your
    >> get RGB of 0,64,128 and if you set the background to rbg(0,64,128)
    >> it matches just fine...

    >
    > Okay, so I've changed background to rgb(0,64,128) in the style-sheet,
    > but how do I reduce the palette of the image?
    >
    > I'm using GraphicConverter.
    >
    > Thank you :)
    >


    You ought to get IrfanView, a free and excellent graphics program that
    makes many conversions very easily. (Dunno if it works on a Mac,
    though.)

    --
    Neredbojias
    He who laughs last sounds like an idiot.
     
    Neredbojias, Mar 8, 2007
    #11
  12. Neredbojias wrote:

    > You ought to get IrfanView, a free and excellent graphics program that
    > makes many conversions very easily. (Dunno if it works on a Mac,
    > though.)
    >


    It's great but I think it is Win only.
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #12
  13. patrick j

    dorayme Guest

    In article
    <>,
    patrick j <> wrote:

    > On Mar 7, 2007 dorayme wrote:
    >
    > > In article
    > > <>,
    > > patrick j <> wrote:
    > >
    > >> <http://www.patrickjames.me.uk/colourtest.html>
    > >>
    > >>
    > >> Viewed with Safari and iCab the colours match perfectly and so the image
    > >> can not be seen. However

    > >
    > > Actually Patrick, this is not true. It is much harder to see in
    > > Safari, that is true. But it can be seen. Not on any old monitor
    > > or especially old CRT but on a high quality newish LCD. JL has
    > > suggested stuff so I won't say more about how to fix.
    > >
    > >

    >
    > Hi dorayme.
    >
    > Being a Mac user you might know how I do Jonathan's instruction on my
    > computer.
    >
    > He writes:
    >
    > > It it is 32-bit but only 3 colors, reduce the the palette and your get
    > > RGB of 0,64,128 and if you set the background to rbg(0,64,128) it
    > > matches just fine...

    >
    > Okay, so I've changed background to rgb(0,64,128) in the style-sheet, but
    > how do I reduce the palette of the image?
    >
    > I'm using GraphicConverter.



    I don't use GC but PS and FW... JL has pointed the direction for
    you while I got my beauty sleep. The issue of being able to tell
    the difference between gif and png in cases like yours comes up
    later I notice. My experience is JLs, that in many situations gif
    is smaller and perfectly adequate.

    Can't help noticing that you are not flying into an insanely
    jealous fit of rage at what I said about my screen. It is so good
    that it picks up contrasts you would not normally see. <g>

    By the way, if you screen shot on your Mac, from Safari, i
    predict it will print to show the "unwanted" contrast and further
    (perhaps more surprising to people) it will show up on a W indows
    browser if you run the screenshot from the Safari to the IE. In
    other words, the info is there.

    --
    dorayme
     
    dorayme, Mar 8, 2007
    #13
  14. patrick j

    patrick j Guest

    On Mar 8, 2007 dorayme wrote:

    > I don't use GC but PS and FW... JL has pointed the direction for
    > you while I got my beauty sleep. The issue of being able to tell
    > the difference between gif and png in cases like yours comes up
    > later I notice. My experience is JLs, that in many situations gif
    > is smaller and perfectly adequate.


    Actually I have reverted to using a .gif now :)

    It looks just fine.

    > Can't help noticing that you are not flying into an insanely
    > jealous fit of rage at what I said about my screen. It is so good
    > that it picks up contrasts you would not normally see. <g>


    What sort of a screen is it?

    I think if I saw it in action I might encounter the jealous fits of rage.

    The one on my Intel iMac is very good but yours must be even better :(

    I find that it is very easy to convert any computer screen into a marvel of
    clarity.

    Just clean it...

    > By the way, if you screen shot on your Mac, from Safari, i
    > predict it will print to show the "unwanted" contrast and further
    > (perhaps more surprising to people) it will show up on a W indows
    > browser if you run the screenshot from the Safari to the IE. In
    > other words, the info is there.


    I believe you :)


    --
    Patrick
    Brighton, UK
    If you wish you can email me from web-site.
    <http://www.patrickjames.me.uk>
     
    patrick j, Mar 8, 2007
    #14
  15. patrick j

    Nik Coughlin Guest

    Jonathan N. Little wrote:
    >>

    > Should not make a difference in a paletted <=256 colors... In your
    > case 1 color. In such situations I find GIF small file size than PNG.


    No. I got this file down to 197 bytes as a png. It's 873 bytes as a gif.
    If your gif files are coming out smaller than png then you're not saving the
    png correctly. Png uses more efficient compression.
     
    Nik Coughlin, Mar 8, 2007
    #15
  16. patrick j

    dorayme Guest

    In article
    <>,
    patrick j <> wrote:

    > What sort of a screen is it?


    It is a Dell 20", 1600*1200 (on either side of which are two CRTs
    to form "one" big desktop - relevant because nothing shines so
    brightly as when there is a favourable comparison nearby). If the
    20" broke tomorrow, I have had my money's worth this past year
    and a bit.

    (btw, I think, but am not quite sure of this, that it is so good
    that I have seen the dark matter in the universe in it...)

    --
    dorayme
     
    dorayme, Mar 8, 2007
    #16
  17. patrick j

    dorayme Guest

    In article
    <>,
    dorayme <> wrote:

    > a favourable comparison nearby


    should read "an unfavourable..."

    --
    dorayme
     
    dorayme, Mar 8, 2007
    #17
  18. patrick j wrote:

    > I'm wondering a bit about an inconsistency between colours matching on a
    > web-site I'm working on.


    Disable gamma when saving your PNG images.

    Gamma is a feature that is *supposed* to account for the differences in
    colours between different screens, but due to the stupidity of gamma
    implementations in most browsers, it actually ends up as a hinderance.

    That is, your PNG is *supposedly* being adjusted to account for your
    screen's brightness and contrast (but how the hell is your browser
    supposed to know how bright your screen is?!) whereas the surrounding CSS
    background is not.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

    * = I'm getting there!
     
    Toby A Inkster, Mar 9, 2007
    #18
  19. patrick j

    Bergamot Guest

    Toby A Inkster wrote:
    >
    > Gamma is a feature that is *supposed* to account for the differences in
    > colours between different screens, but due to the stupidity of gamma
    > implementations in most browsers, it actually ends up as a hinderance.


    I don't put blame on the browsers. Mac purposely instituted a different
    png gamma correction than Windows, so the O/S is mostly to blame. Safari
    apparently goes along with native Mac, where other browsers side with
    the Windows way. gif doesn't have this issue.

    --
    Berg
     
    Bergamot, Mar 9, 2007
    #19
  20. patrick j

    Nik Coughlin Guest

    Bergamot wrote:
    > Toby A Inkster wrote:
    >>
    >> Gamma is a feature that is *supposed* to account for the differences
    >> in colours between different screens, but due to the stupidity of
    >> gamma implementations in most browsers, it actually ends up as a
    >> hinderance.

    >
    > I don't put blame on the browsers. Mac purposely instituted a
    > different png gamma correction than Windows, so the O/S is mostly to
    > blame. Safari apparently goes along with native Mac, where other
    > browsers side with the Windows way. gif doesn't have this issue.


    Nor do png files with the gAMA chunk removed.
     
    Nik Coughlin, Mar 11, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    4
    Views:
    2,168
  2. mark
    Replies:
    4
    Views:
    315
  3. Replies:
    0
    Views:
    474
  4. +mrcakey
    Replies:
    9
    Views:
    462
    Jonathan N. Little
    Oct 11, 2008
  5. Peter Williams
    Replies:
    3
    Views:
    204
Loading...

Share This Page