homepage Welcome to WebmasterWorld Guest from 54.234.2.94
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

This 38 message thread spans 2 pages: 38 ( [1] 2 > >     
Browser Safe Color
suzanne




msg:859364
 7:16 pm on Oct 1, 2002 (gmt 0)

Hiya,

Has there been any updates to the old 256 browser safe colors as of late? Also, do these standards apply to color in HTML -- or colors used both in HTML and images (gif & jpg) that appear on the internet. If anyone has any info, or can point me toward some good reference sites on this topic, that'd be most excellent!

 

amoore




msg:859365
 7:28 pm on Oct 1, 2002 (gmt 0)

These seem to be some authoritative pages:
[lynda.com...]
and
[hotwired.lycos.com...]
as far as who to believe, I don't know. I'm inclined to believe that if you don't use colors in HTML and images that are supposed to match or if you expect everyone to have more than 8 bit color that it really doesn't matter.

suzanne




msg:859366
 7:33 pm on Oct 1, 2002 (gmt 0)

Ha! Those are the exact two articles I came across and I still don't know who to believe. Guess this topic is still up for debate...

mivox




msg:859367
 8:49 pm on Oct 1, 2002 (gmt 0)

I wouldn't rely on being able to match a graphic precisely to an html-specified color (as much because of platform color differences as anything... Mac and Windows display color slightly differently), but I'd imagine the number of people running a computer set to 256 colors is getting pretty slim...

And (as I tell myself about Netscape 4 users & advanced page layout as well) if someone's running a 256 color system, they must be getting used to a pretty ugly internet experience. ;)

suzanne




msg:859368
 9:01 pm on Oct 1, 2002 (gmt 0)

so basically the key here is to use the colors you want, just don't try and develop your html colors to match image colors exactly... there has to be some wiggle room so the design will look ok even if the colors are rendered a bit differently?

Does this mean use whatever color I want?

THAT would be nice!

mivox




msg:859369
 5:29 pm on Oct 2, 2002 (gmt 0)

I have a five year old Macintosh clone that displays 16,000+ colors as its default setting... so you'll be pretty safe with most Mac users (I think System 7 and up would be OK). However, Windows machines a few years ago were still shipping with defaults set to 256...

If you're working on a specific existing site, you could check the visitor logs to see what operating systems are visiting the site the most. If your Windows visitors are all using '98 and up, you should be OK.

Just don't forget your wiggle room ;) ...and don't shoot me if someone using an old computer emails you to tell you how ugly the site looks! It's never happened to me, but there's a first time for everything.

copongcopong




msg:859370
 12:42 am on Oct 3, 2002 (gmt 0)

Please remember that the "web-safe colors" was actually or mostly was based from the statistics of the Video card color settings (256 colors, 16 bit, 24 ... etc) on the old days of the internet ... therefore, you may wish to check out the statistics first.

.. sounds like the browser statistics where in you may consider not designing for old browser or lower color settings.

peace. :)

lorax




msg:859371
 1:58 am on Oct 3, 2002 (gmt 0)

I tossed that guideline out about 8 months ago. I won't say I work with a full palette - that can be taken two ways :) - but I will say I don't focus on limiting my selections either.

jen24815




msg:859372
 4:10 pm on Oct 13, 2002 (gmt 0)

Old thread, but I agree.

I haven't restricted myself to the "web safe" palette for a very long time.

On a side note, if you do design for print, PANTONE has software called ColorWeb Pro 2.0 that will specify the closest RGB/HEX equivalent for their spot colors.

And, after just buying new chip sets and formula guides :(, the $40 price tag for the software was much welcomed.

Birdman




msg:859373
 5:03 pm on Oct 13, 2002 (gmt 0)

If you use rgb() to identify your html colors and use the same rgb() colors as your image, wouldn't they have to match

martinibuster




msg:859374
 5:07 pm on Oct 13, 2002 (gmt 0)

PC's seem to be shipping with their monitor defaults set to 16 bit thousands of colors, so be sure that your monitor is as well.

I was using 32 bit millions of colors until I saw what my work looked like on the average monitor. Goodness!

I use browser safe colors in html and css, as other colors may render wildly different. Even grotesquely different. Netscape renders colors differently, too.

What I shoot for is that all the colors blend well. Yes, the shade may be darker or lighter on different systems, but that's fine. As long as it isn't an entirely different color altogether.

Checklist:
html/css friendly colors?
Check netscape
Check mac
check what it looks like on thousands of colors.

jen24815




msg:859375
 2:26 am on Oct 14, 2002 (gmt 0)

Hi Suzanne,

I didn't realize this until I re-read your question, but there won't *be* any updates to the web safe palette.

Reason being, is that it's basically the lowest common denominator and everything else is an improvement from there and not subject to the same restrictions.

You see, that terminology refers to the 216 colors that both PCs and Macs will display the "same" and w/o dithering on 8 bit resolution (256 color mode). Even though the monitor/browser could display 256 colors at that bit depth, only 216 of those colors are shared by both PC and Mac, hence "safe" to use and be assured they won't shift or dither.

So, they won't add any colors to that palette because those systems will never be capable of displaying any more than 256 colors.

In other words, technology has moved forward to the point that most - and by my stats, the vast majority - of visitors have systems capable of displaying thousands or millions of colors, so there's no need to add anything to that palette, because the ONLY reason you'd be using it anyway is in order to accomodate the antiquated - no offense to anyone - machines.

It would be like saying - in this age of CDs and DVDs - that someone was planning on improving the 8-track; see what I mean?

Birdman is correct in what he said regarding Web graphics.

If you want to design using Web safe colors, just load a browser safe palette in your image editing or illustration program, use it to create your images, and then pick one of the colors from that palette to use for your HEX value for backgrounds or whatever, then you should be assured you're safe.

The "problem" comes in when you're trying to match Web colors and print colors.

As I was saying, I design my print items using the PANTONE CMS and picking the colors from swatch books. Then I use the software I mentioned to choose the closest RGB/HEX value.

That can be a headache sometimes because some of the colors just aren't reproducable online. Your monitor displays in RGB and you're trying to reproduce an actual specially mixed *ink* color; doesn't always work. It's akin to trying to paint the exact color of the green light on a traffic signal - you might get close, but you won't be able to duplicate it exactly.

Again, though, I really never pay all that much attention to the web safe palette; 99% of my visitors DON'T use 256 color mode, and like mivox said, those that do are used to ugly anyway. :)

Take care,

Jenny

kingkelly




msg:859376
 2:45 am on Oct 14, 2002 (gmt 0)

You can use RGB references instead of websafe colour codes in HTML documents, but i prefer using web safe colours, simply because they can integrate the best with gifs. Gifs can be saved in 256 color mode, and will have that EXACT color once saved. So if your background is #CCCC00, and you want your gif to blend in to it seemlessly, it is very possible.

Hope this makes sence

Birdman




msg:859377
 2:54 am on Oct 14, 2002 (gmt 0)

But if you use the actual rgb of the gif you are trying to match, it should be the the same.

div.blah{background-color: rgb(234,46,345)

Please correct me if I am wrong. I'm just making an assumption :)

jen24815




msg:859378
 3:09 am on Oct 14, 2002 (gmt 0)

kingkelley/birdman - I'm not sure about the RGB references that you're referring to birdman b/c I don't do CSS.

If it's true that you can do that, then you could use either RGB or HEX interchangeably, because all Web safe colors (all browser colors for that matter) have *both* an RGB value AND a HEX value - they're not two different things; or not mutually exclusive, should I say.

Take white for example. It's a web safe color and its RGB value is R255 G255 B255, while its HEX value is #FFFFFF. So if what birdman is saying is true, you could use either RGB or HEX to acheive the same result.

jen24815




msg:859379
 3:14 am on Oct 14, 2002 (gmt 0)

Also, just to confuse things more, kingkelley, GIFs have a max of 256 colors, but just because you save an image as a GIF, it doesn't necessarily mean that all colors within that image file are web safe colors. It could contain one of the 40 colors outside the 216 web safe palette, for example. :)

Eric_Jarvis




msg:859380
 10:06 am on Oct 14, 2002 (gmt 0)

the other point is the reason for the web safe palette...it is to avoid problems with dithering under low resolutions (when a pattern of two colours is used to represent the specified colour)...consequently it only really matters when that might be a problem...now and again I rather like the fact that people with lower resolutions are getting a slightly nicer background the people with higher range systems...like a textured background for zero extra bandwidth :)

I still bear it in mind...it's not important for many desktops...but does still seem to matter for some handheld and mobile devices...since these are increasing in use it may be a while yet before it ceases to be important

fathom




msg:859381
 10:19 am on Oct 14, 2002 (gmt 0)

Another good point is what you are attempting to do with the site.

Web safe colors are perfect for shopping carts and associated pages.

By the time a visitor is wanting "to buy" they do not need slow loading "true color" graphical pages to entice them.

mivox




msg:859382
 6:23 pm on Oct 21, 2002 (gmt 0)

If you use rgb() to identify your html colors and use the same rgb() colors as your image, wouldn't they have to match

The problem, I think, is that each platform and monitor calibration setting will slightly alter color rendering... what looks like a perfect match on a Mac default monitor won't match when you look at it on a default Windows machine, and vice versa... and how graphic colors are rendered seems to differ slightly from how html hex codes are interpreted.

Unless there's a workaround in CSS, I don't believe you can actually specify RGB numbers in the html code, can you? I thought you had to either use named colors or hex codes...

I haven't actually tried to exactly match colors between a GIF and the html background color in about three years, after I spent almost a week trying to match an exact color of tan between some navigation buttons and a background color.

It hasn't been much of a hindrance to my designs, so just working around the situation has been the easiest solution for me.

gsx




msg:859383
 10:21 pm on Oct 21, 2002 (gmt 0)

Hex codes are RGB colours: The first two digits specify the level of red, the next two green and the last two blue.

They range from 00-FF:hexidecimal (0-255:Decimal) for each giving you a range of 16,777,215 colours. If your eyes can see more colours than that, then you have eyesite that is well above average.

So if you convert your colour percentages to the range 0-255 by multiplying by 2.55 and then convert each R,G or B to hexidecimal and then type them in using the format RRGGBB, you have specified rgb(RR,GG,BB) in exactly the same way.

mivox




msg:859384
 10:25 pm on Oct 21, 2002 (gmt 0)

Thanks for the clarification. :) I never knew the significance of the hex codes.

Chris_R




msg:859385
 12:54 am on Oct 22, 2002 (gmt 0)

Man - I love the posters these guys have:

[visibone.com...]

I have all three of their color posters.

browser safe is easy to recognize if you know the little trick - there are 216 browser safe colors:

6 Different R x 6 Different Green x 6 Different B=216

They all are:

00
33
66
99
CC
FF

So if you see

003300
3399cc
ff33cc
990099

you know they are browser safe

anything that isn't a pair of those 6 characters is not.

I don't know how much it matters, but hey - the posters look cool...

Alex_Gilman




msg:859386
 7:06 pm on Oct 30, 2002 (gmt 0)

Actually, what I tend to do is browse a few of my local computer stores and see what the settings are on the new computers. The newest generation is coming with 1024x768 and 32bit color. This means they can handle pretty much any color you throw at them.

However, in order to maintain graceful degradation into the "older" systems that are 800x600 and those tend to be 16bit. (these go back quite a few years) and are currently the standard for which we design for. I believe that you are safe designing in a 16bit color palate and encompass something like way over 90% of all users.

SmallTime




msg:859387
 7:16 pm on Oct 30, 2002 (gmt 0)

As far as I have read, 16 bit colors are not a subset of 32 bit. There is not any common colors between the sets, as the mathematical way they make color is different. Chances are that a 16 bit color will have a close equivalent in the 32 bit colors is good, and visa-versa, but not exact. The solution is for everybody to change their settings from 16 bit to 32 bit, but don't hold your breath. I use 32 bit colors and try to remember to check them at 16.

tedster




msg:859388
 7:30 pm on Oct 30, 2002 (gmt 0)

You got it right. Here's a 2-year old article from Lycos's Webmonkey

The old 216-websafe palette is a subset of the 8-bit palette, identified for browser and operating system compatibility. But the 15-bit and 16-bit palettes are not subsets of the 24-bit palette; they are entirely distinct palettes. So no matter which color you choose when you're designing (excluding black and white), you cannot choose a color that exists both in the 24-bit palette and in either the 15- or 16-bit palettes.

Death of the websafe color palette? [hotwired.lycos.com]

By the way, the 32-bit palette has the same number of colors as the 24-bit. The extra 8 bits are used for other purposes.

tedster




msg:859389
 7:34 pm on Oct 30, 2002 (gmt 0)

...just because you save an image as a GIF, it doesn't necessarily mean that all colors within that image file are web safe colors. It could contain one of the 40 colors outside the 216 web safe palette, for example.

This is more the case than you might think. Each cell in a GIF color table can map to ANY RGB color. Some editors have a "web snap" feature that nudges the RGB values closer to the less problematic colors.

But if you just choose 256 colors for a GIF, the odds are you won't get even ONE "websafe" color in the index.

Alex_Gilman




msg:859390
 7:52 pm on Oct 30, 2002 (gmt 0)

SmallTime, I agree with your post. But you have to keep in mind that usually the differences in color are so subtle that most people including the designer can't tell

tedster




msg:859391
 8:09 pm on Oct 30, 2002 (gmt 0)

I agree, many color differences are not detectable by eye. The one place you may see the difference is at the edge of an image, when you are attempting to match the image's "background" color to a body background color.

I've found it's safest to create a small, one color GIF and tile it as a background image, in addition to declaring a bgcolor.

Then, whether you're in 16-bit or 24-bit, the color shift is usually the same for the image and the background - and there are no unsightly boxes around images. But if you just use a bgcolor, the particular system colors on some computers/browsers may throw you a curve ball.

You're also better off (with a GIF or PNG) to use a transparent background in the image. Then there is no "straight edge" to show off the color shift.

Alex_Gilman




msg:859392
 8:54 pm on Oct 30, 2002 (gmt 0)

tedster, thats a good idea I've seen people use that and it does work.

What I tend to do... and it hasn't got me into any trouble yet. I use any color I want in photoshop (this is usually done with a non lossy format graphic) and then I get the hex value from it using the eyedropper tool and pop in that hex value into my background in HTML.

jen24815




msg:859393
 9:04 pm on Oct 30, 2002 (gmt 0)

To make it blend seamlessly, another thing you can do is when you create your image, flood fill the image window with the color of the web page background and then create the image on top of that. Set the transparent color to the the web page bgcolor and save it.

That way, the anti-aliased edges of the image pick up the color of the page background (your fill/transparent color) and you don't have white jaggies around the image when it's used online.

This 38 message thread spans 2 pages: 38 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved