Matching colours between a .png and background

[patrick j]

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

 

[Jonathan N. Little]

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...

 

[dorayme]

<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.

 

[Nik Coughlin]

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/

 

[patrick j]

The URL is:

[...]

[...]

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 j]

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.

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

 

[Jonathan N. Little]

The URL is:

[...]

[...]

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!

 

[patrick j]

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

 

[Jonathan N. Little]

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.

 

[Andy Dingley]

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>

 

[Neredbojias]

Hi dorayme.

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


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.)

 

[Jonathan N. Little]

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.

 

[dorayme]

Hi dorayme.

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


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.

 

[patrick j]

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

 

[Nik Coughlin]

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.

 

[dorayme]

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]

a favourable comparison nearby

should read "an unfavourable..."

 

[Toby A Inkster]

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!

 

[Bergamot]

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.

 

[Nik Coughlin]

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.