Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Matching colours between a .png and background

Reply
Thread Tools

Matching colours between a .png and background

 
 
patrick j
Guest
Posts: n/a
 
      03-07-2007
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>

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-07-2007
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,12 it
matches just fine...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      03-07-2007
In article
<(E-Mail Removed) et>,
patrick j <(E-Mail Removed)> 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
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      03-07-2007
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/



 
Reply With Quote
 
patrick j
Guest
Posts: n/a
 
      03-08-2007
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,12 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,12.

I'm probably being very stupid



--
Patrick
Brighton, UK
If you wish you can email me from web-site.
<http://www.patrickjames.me.uk>

 
Reply With Quote
 
patrick j
Guest
Posts: n/a
 
      03-08-2007
On Mar 7, 2007 dorayme wrote:

> In article
> <(E-Mail Removed) et>,
> patrick j <(E-Mail Removed)> 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,12 it
> matches just fine...


Okay, so I've changed background to rgb(0,64,12 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>

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-08-2007
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,12 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,12.
>
> 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
 
Reply With Quote
 
patrick j
Guest
Posts: n/a
 
      03-08-2007
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>

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-08-2007
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
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      03-08-2007
On 7 Mar, 16:55, patrick j <(E-Mail Removed)> 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>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
printer colours vs 'real' colours dido22 Digital Photography 4 06-15-2007 03:37 PM
Form Table Printing Issue with background colours mark ASP .Net 4 09-25-2006 07:51 AM
javascript to change cell background colours on a timer. Peter Williams Javascript 3 06-01-2005 06:30 PM
Table background colours not showing up in Firefox Big Craigie Firefox 1 04-04-2005 11:49 PM
OE : More background colours? Champagne Charlie Computer Support 5 12-22-2003 04:06 AM



Advertisments