SitePoint.com

jstubbs · Mar 6, 2003, 02:50

Just a quick question re background colors - if I were to specify a BG color in a <table> or <body> tag (or in a style sheet) that was not on the user's system, is it correct to assume that the color will be replaced with a default system (or web safe) color?

However, if I specify a BG as a gif with the color that I want, would this appear correctly even if the color is not on the user's system?

Hope this is clear...

Mincer · Mar 6, 2003, 02:59

No,

If the user is in 256 colour, and you use a hex code, or have an image who's palette contains a value not in the 256 colours, then it will be matched as a nearest neighbour.

Matt.

jstubbs · Mar 6, 2003, 03:07

Thanks for the reply. So let me get this straight - if I use a hex colour like #A5B658, then it will display correctly if the user has 256 colours?

I notice that this particular colour looks different on various systems - what is the best route to follow with BG colours?

jstubbs · Mar 6, 2003, 03:11

One more related question re fonts for a navigation system - when using fonts like Serpentine, is it best to outline them in Illustrator or similar, then use a gif for the menu?

I would only do this for a font like Serpentine that is not common - would not do this for Tahoma or Arial. Is this the right way of doing things to make sure that the design is correctly displayed?

Bill Posters · Mar 6, 2003, 03:38

#A5B658 is outside the non-dithering 'web safe' colour palette.

Web safe colours would be those with hexdec values that consist entirely of F, C, 0, 3, 6, 9 and are set in pairs.

i.e. #ffcc00, #ffff99, #333333

See here for further reading:
http://www.lynda.com/hex.html
http://www.lynda.com/hexh.html
http://www.lynda.com/hexv.html
http://www.colostate.edu/Depts/CoopE.../colortab.html

If an image contains a pixel of colour outside the web-safe palette then that pixel will be displayed as the nearest colour to it from within the web-safe palette on 256-colour monitors.

--

Re: Serpentine (and other uncommon fonts).

Fwiw Illustrator 10 has the same save to web features as Photoshop.
You don't need to convert it to outlines* as the text is converted to pixels when you save to web anyway.

(* It's best to keep text as editable text whenever possible. You never know when you might need to go back to the illustrator files and change a word here or there or spot a spelling mistake.)

Uncommon fonts are much better presented as gif text as it is highly unlikely that such fonts will be present on your visitor's machine.

That being said, there is no harm in trying.

In your font-family settings place serpentine first in the list.
In the likely event that it is not present, the next font in the list be be used.
Those who have that font on there machines will see your site as you ideally intended.

A font such as Serpentine is unsuitabe for use in large blocks of text as its characteristics are more suited to display/headings rather than body text.
It should be ok for use within a menu system, but may begin to look a little cramped and illegible at small sizes.

In general, it's best to limit the use of gif text to a reasonable minimum (i.e. just for section titles and other special graphic enhancements).

jstubbs · Mar 6, 2003, 04:02

That's a fantastic repsonse - thanks! Pretty much confirmed what I had thought, but its good to get it from another source and increase my understanding...

I don't want to use Serpentine anywhere except in the menu on the side, so that will work ok I think. Body text will be Tahoma or Arial.

Thanks for the help!

DougBTX · Mar 6, 2003, 14:50

On websafe colours: They only apply to users with 256 colours displays, which is less than 2% according to thecounter.

Regardless, if the colour dithers in hex, it will dither in a gif too.

My take on it: Use any colours you want, but if you want to match exactly a colour in a picture and a colour as a background, use an image with that colour, otherwise use hex or rgb or named colours.

Douglas

anode · Mar 6, 2003, 14:56

More info on why the web-safe palette is obsolete

Zopester · Mar 7, 2003, 03:22

The original so-called "websafe" colour palette may be obsolete, but there is an expanded colour palette that can (and should) be used where possible.

Rather than explain (badly) I'll just point you to an absolutely great site where you can see the whole expanded websafe palette: http://www.morecrayons.com (great URL too)

wisbin · Mar 7, 2003, 04:36

The mathematics

The colors in the browser-safe palette are made up of combinations of the values 00, 33, 66, 99, cc, and ff. Notice that these are all pairs and that on the hex-scale ( 1 2 3 4 5 6 7 8 9 A B C D E F) this selection is like a Wiener Walz, using only first-fourth-seventh-tenth-thirteenth-sixteenth.
There are six ways to pick a first double pair, and six for the second pair and also six for the last pair. So that makes 6x6x6 = 216 possible colors.

The web-smart palette is made up of combinations of ALL the heximal values, also in pairs. So this is not a 216 color palet but a 16x16x16 palet of 4096 colors. This web-smart palette uses any combination of 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, aa, bb, cc, dd, ee, and ff. This should be save to use if your viewers use a 16-bit or 24-bit screendevice. And they are!

BUT¿
Is there a way to set a clients colourdepth?
I noticed some Director movies/CD-roms who sniff my bit-depth and warn me about setting it at to a different depth before playing the app.

Is there anything similar for webdesign?

DougBTX · Mar 7, 2003, 12:29

Quote:

Originally Posted by wisbin

Is there anything similar for webdesign?

I've never looked into it, but I know that at thecounter.com they detect the browser's colourdepth. Try taking a look at the code they use behind their counters, it's probably all in the javascript!

On colours, as the "web-smary" pallet is based on #112233, you could probably use #123 to the same effect. I hadn't heard of it before, but should be equivelant.

Douglas

Viral · Mar 7, 2003, 22:48

Quote:

Originally Posted by wisbin

The mathematics
BUT¿
Is there a way to set a clients colourdepth?
I noticed some Director movies/CD-roms who sniff my bit-depth and warn me about setting it at to a different depth before playing the app.

Is there anything similar for webdesign?

As far as I know, there's no way to change the user's color depth, but you can easily find out what it's set to with javascript...

Code:

 <script language='JavaScript'>var colorDepth = screen.colorDepth;</script>

You could then make whatever adjustments you need if colorDepth < 16 or whatever...

--Viral

wisbin · Mar 8, 2003, 05:15

so, if you really need to, you could redirect to a websafe css colorpallet. That is probably not used a lot anymore.. or?...

cheers

Viral · Mar 8, 2003, 10:18

No, not used at all anymore. I abandoned the "web safe" color pallet years ago. The only thing to keep in mind is to use as few colors as necessary to keep your image sizes down.

remember: PNG for graphics, JPG for photographs

--Viral

geiger · Mar 8, 2003, 10:37

What's still important in web design, realize, is matching backgrounds to gifs. If you're using a background color #g029f2 and a gif right on top of it whose main color is #g029f2, you're in for a nice surprise with some systems. It may display in IE/WIN fine and NET/WIN incorrectly (the colors will be different. Or IE/WIN incorrectly, IE/MAC and NET/WIN correctly. To be safe, when matching colors, use something websafe. But only for bg/images.

DougBTX · Mar 8, 2003, 17:06

Quote:

Originally Posted by geiger

To be safe, when matching colors, use something websafe. But only for bg/images.

Not really true, atleast according to: the reallysafe palette.

More info: http://hotwired.lycos.com/webmonkey/...html?tw=design

Douglas

geiger · Mar 8, 2003, 21:01

I've seen it with my own eyes. How can it not be true?

Hmm... well, I'm not perfect

Viral · Mar 10, 2003, 09:01

If you need to match an image with the background, you should be using transparency. It's the only way to insure that your images will look seemless across all platforms. Windows, Mac and *nix all map colors differently. So even if you make it look just right on your machine, chances are that many users will still see a difference.

Use transparency. PNG has excellent support for this.

Mincer · Mar 10, 2003, 09:19

Quote:

Originally Posted by Viral

It's the only way to insure that your images will look seemless across all platforms.

Quote:

Originally Posted by Viral

+Use transparency. PNG has excellent support for this.

IE doesn't display PNG transparency correctly in most cases.

Viral · Mar 10, 2003, 09:21

Really? Hmmm, I've never had a problem with it... (shrug) I suppose if you run into issues, you can always fall back on gifs

--Viral

Mincer · Mar 10, 2003, 09:27

Quote:

Originally Posted by Viral

Really? Hmmm, I've never had a problem with it... (shrug)

Try looking at these two sites in IE and Mozilla

http://home.tephras.com/temp/PNG/

http://jaenus.pinkbat.com/webdev/transp.php

Matt.

Bill Posters · Mar 10, 2003, 11:12

Quote:

Originally Posted by Mincer

IE doesn't display PNG transparency correctly in most cases.

Quote:

Originally Posted by Mincer

Try looking at these two sites in IE and Mozilla

http://home.tephras.com/temp/PNG/

http://jaenus.pinkbat.com/webdev/transp.php

Matt.

Instead of looking at those sites and worrying about nothing, look at this one and find out how to get full PNG transparency support out of MSIE5+/Win.

http://www.alistapart.com/stories/pngopacity/index.html

MSIE5+/Win may not support PNG24 'natively', but that doesn't mean that it can't show PNG24s in all their splendour.

Mincer · Mar 10, 2003, 12:57

Yes, but where does it all stop? You can see that not many people like the 'solution' from the discussion thread at A List Apart.

Just imagine for a second coding a page to display an alpha transparent image in a centered 200px square div with a 2px border. And without server-side scripting. So, we have hacks for the IE box model, then the workarounds for Opera, now we also have this image hack...etc. My HTML is now twice the size it was before.

IMHO I don't really care how many hacks there are. If something doesn't work, it needs fixing, not working around indefinately...

Matt.

steps off soapbox...

Viral · Mar 10, 2003, 14:14

You are correct. It might not be the most elegant solution, but it is a viable workaround to this issue. And the bottom line is GIFs will be obsolete very soon because of their stiff royalties. Even without that, PNG is a much better format that we SHOULD start using. If more of us use it, Microsoft will fix it in their broken browser.

But don't just wait around for that to happen chicken-n-egg style, sign the petition http://www.petitiononline.com/msiepng/petition.html

Mar 6, 2003, 03:38	#5
Bill Posters SitePoint Wizard Join Date: Dec 2001 Location: UK Posts: 1,524	#A5B658 is outside the non-dithering 'web safe' colour palette. Web safe colours would be those with hexdec values that consist entirely of F, C, 0, 3, 6, 9 and are set in pairs. i.e. #ffcc00, #ffff99, #333333 See here for further reading: http://www.lynda.com/hex.html http://www.lynda.com/hexh.html http://www.lynda.com/hexv.html http://www.colostate.edu/Depts/CoopE.../colortab.html If an image contains a pixel of colour outside the web-safe palette then that pixel will be displayed as the nearest colour to it from within the web-safe palette on 256-colour monitors. -- Re: Serpentine (and other uncommon fonts). Fwiw Illustrator 10 has the same save to web features as Photoshop. You don't need to convert it to outlines* as the text is converted to pixels when you save to web anyway. (* It's best to keep text as editable text whenever possible. You never know when you might need to go back to the illustrator files and change a word here or there or spot a spelling mistake.) Uncommon fonts are much better presented as gif text as it is highly unlikely that such fonts will be present on your visitor's machine. That being said, there is no harm in trying. In your font-family settings place serpentine first in the list. In the likely event that it is not present, the next font in the list be be used. Those who have that font on there machines will see your site as you ideally intended. A font such as Serpentine is unsuitabe for use in large blocks of text as its characteristics are more suited to display/headings rather than body text. It should be ok for use within a menu system, but may begin to look a little cramped and illegible at small sizes. In general, it's best to limit the use of gif text to a reasonable minimum (i.e. just for section titles and other special graphic enhancements). Last edited by Bill Posters; Mar 6, 2003 at 03:54.

Mar 8, 2003, 05:15	#13
wisbin SitePoint Zealot Join Date: Jan 2003 Location: Netherlands Posts: 116	thnx so, if you really need to, you could redirect to a websafe css colorpallet. That is probably not used a lot anymore.. or?... cheers

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Mar 6, 2003, 02:50	#1
jstubbs SitePoint Addict Join Date: Jan 2002 Location: Norway Posts: 219	BG color - use gif or #? Just a quick question re background colors - if I were to specify a BG color in a <table> or <body> tag (or in a style sheet) that was not on the user's system, is it correct to assume that the color will be replaced with a default system (or web safe) color? However, if I specify a BG as a gif with the color that I want, would this appear correctly even if the color is not on the user's system? Hope this is clear...

Mar 6, 2003, 02:59	#2
Mincer SitePoint Wizard Join Date: Mar 2001 Location: London \| UK Posts: 1,144	No, If the user is in 256 colour, and you use a hex code, or have an image who's palette contains a value not in the 256 colours, then it will be matched as a nearest neighbour. Matt.

Mar 6, 2003, 03:07	#3
jstubbs SitePoint Addict Join Date: Jan 2002 Location: Norway Posts: 219	Thanks for the reply. So let me get this straight - if I use a hex colour like #A5B658, then it will display correctly if the user has 256 colours? I notice that this particular colour looks different on various systems - what is the best route to follow with BG colours?

Mar 6, 2003, 03:11	#4
jstubbs SitePoint Addict Join Date: Jan 2002 Location: Norway Posts: 219	One more related question re fonts for a navigation system - when using fonts like Serpentine, is it best to outline them in Illustrator or similar, then use a gif for the menu? I would only do this for a font like Serpentine that is not common - would not do this for Tahoma or Arial. Is this the right way of doing things to make sure that the design is correctly displayed?

Mar 6, 2003, 04:02	#6
jstubbs SitePoint Addict Join Date: Jan 2002 Location: Norway Posts: 219	That's a fantastic repsonse - thanks! Pretty much confirmed what I had thought, but its good to get it from another source and increase my understanding... I don't want to use Serpentine anywhere except in the menu on the side, so that will work ok I think. Body text will be Tahoma or Arial. Thanks for the help!

Mar 6, 2003, 14:50	#7
DougBTX SitePoint Wizard Join Date: Nov 2001 Location: Bath, UK Posts: 2,532	On websafe colours: They only apply to users with 256 colours displays, which is less than 2% according to thecounter. Regardless, if the colour dithers in hex, it will dither in a gif too. My take on it: Use any colours you want, but if you want to match exactly a colour in a picture and a colour as a background, use an image with that colour, otherwise use hex or rgb or named colours. Douglas

Mar 6, 2003, 14:56	#8
anode Sidewalking Join Date: Mar 2001 Location: Philadelphia, US Posts: 2,241	More info on why the web-safe palette is obsolete

Mar 7, 2003, 03:22	#9
Zopester Incoherent drivel since 1975 Join Date: Feb 2003 Location: UK Posts: 215	The original so-called "websafe" colour palette may be obsolete, but there is an expanded colour palette that can (and should) be used where possible. Rather than explain (badly) I'll just point you to an absolutely great site where you can see the whole expanded websafe palette: http://www.morecrayons.com (great URL too)

Mar 7, 2003, 04:36	#10
wisbin SitePoint Zealot Join Date: Jan 2003 Location: Netherlands Posts: 116	The mathematics The colors in the browser-safe palette are made up of combinations of the values 00, 33, 66, 99, cc, and ff. Notice that these are all pairs and that on the hex-scale ( 1 2 3 4 5 6 7 8 9 A B C D E F) this selection is like a Wiener Walz, using only first-fourth-seventh-tenth-thirteenth-sixteenth. There are six ways to pick a first double pair, and six for the second pair and also six for the last pair. So that makes 6x6x6 = 216 possible colors. The web-smart palette is made up of combinations of ALL the heximal values, also in pairs. So this is not a 216 color palet but a 16x16x16 palet of 4096 colors. This web-smart palette uses any combination of 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, aa, bb, cc, dd, ee, and ff. This should be save to use if your viewers use a 16-bit or 24-bit screendevice. And they are! BUT¿ Is there a way to set a clients colourdepth? I noticed some Director movies/CD-roms who sniff my bit-depth and warn me about setting it at to a different depth before playing the app. Is there anything similar for webdesign?

Mar 8, 2003, 10:18	#14
Viral SitePoint Addict Join Date: Nov 2001 Location: Washington DC Posts: 294	No, not used at all anymore. I abandoned the "web safe" color pallet years ago. The only thing to keep in mind is to use as few colors as necessary to keep your image sizes down. remember: PNG for graphics, JPG for photographs --Viral

Mar 8, 2003, 10:37	#15
geiger Volconvo.com Join Date: Jul 2001 Posts: 3,133	What's still important in web design, realize, is matching backgrounds to gifs. If you're using a background color #g029f2 and a gif right on top of it whose main color is #g029f2, you're in for a nice surprise with some systems. It may display in IE/WIN fine and NET/WIN incorrectly (the colors will be different. Or IE/WIN incorrectly, IE/MAC and NET/WIN correctly. To be safe, when matching colors, use something websafe. But only for bg/images.

Mar 8, 2003, 21:01	#17
geiger Volconvo.com Join Date: Jul 2001 Posts: 3,133	I've seen it with my own eyes. How can it not be true? Hmm... well, I'm not perfect

Mar 10, 2003, 09:01	#18
Viral SitePoint Addict Join Date: Nov 2001 Location: Washington DC Posts: 294	If you need to match an image with the background, you should be using transparency. It's the only way to insure that your images will look seemless across all platforms. Windows, Mac and *nix all map colors differently. So even if you make it look just right on your machine, chances are that many users will still see a difference. Use transparency. PNG has excellent support for this.

Mar 10, 2003, 09:21	#20
Viral SitePoint Addict Join Date: Nov 2001 Location: Washington DC Posts: 294	Really? Hmmm, I've never had a problem with it... (shrug) I suppose if you run into issues, you can always fall back on gifs --Viral

Mar 10, 2003, 12:57	#23
Mincer SitePoint Wizard Join Date: Mar 2001 Location: London \| UK Posts: 1,144	Yes, but where does it all stop? You can see that not many people like the 'solution' from the discussion thread at A List Apart. Just imagine for a second coding a page to display an alpha transparent image in a centered 200px square div with a 2px border. And without server-side scripting. So, we have hacks for the IE box model, then the workarounds for Opera, now we also have this image hack...etc. My HTML is now twice the size it was before. IMHO I don't really care how many hacks there are. If something doesn't work, it needs fixing, not working around indefinately... Matt. steps off soapbox...

Mar 10, 2003, 14:14	#24
Viral SitePoint Addict Join Date: Nov 2001 Location: Washington DC Posts: 294	You are correct. It might not be the most elegant solution, but it is a viable workaround to this issue. And the bottom line is GIFs will be obsolete very soon because of their stiff royalties. Even without that, PNG is a much better format that we SHOULD start using. If more of us use it, Microsoft will fix it in their broken browser. But don't just wait around for that to happen chicken-n-egg style, sign the petition http://www.petitiononline.com/msiepng/petition.html