Astro Lesson #17 :the.day.of.the.hybrids

Sounds like a B-grade space schlock movie right? Don't worry, it's not. We're still dribbling on about colors - and the safe, or limited, or indexed (take your pick) color palette used in web design.

In previous lessons we have explained why it is necessary to use only these colors in order to have safe surfing. If you are still unsure about it all - go back in time and read it all again NOW!

Otherwise, read on comrades!

hunting.happy.hybrids
216 colors, you say? Why, who could ask for anything more? (remember when Bill Gates said no-one would ever need more than a few meg to run their computers? Hah!) Retrogrrl came across a problem just the other day while trying to find just the right shade of green for a background color in a web page she is designing for her good friend Nerida (Hi Nerida!). Even with the full array of hex colors at her fingertips, she just wasn't happy. We told her to stick in any old color - it would look okay, sorta... but no, she had to figure this one out.

How come you couldn't use a mixture of the safe colors to produce the right shade, she pondered? It makes sense that 2 browser safe colors added together outta result in another browser safe color, but how to go about ensuring this turned out okay?

Well, it turned out that this was not an original idea (she hardly ever has any of those *snigger*) and was in fact, mentioned in that most illustrious book "Designing Web Graphics" by Lynda Weinman. Lynda's friends Don Barnett and Bruce Heavin invented what they called "hybrid-safe" colors.

technicolor.trickery
In actual fact, this is a process of tricking the gullible public (that's us!) into thinking we are viewing a color not found within the browser-safe palette - and this is done by creating tiny background gifs made as soon described... (Then it's simply a matter of setting these as the background of your page using the normal html tags.

What you are trying to achieve is a repeating pattern of individual pixels so you'll need a simple drawing program like paint shop pro, or photopaint/photoshop if you are a little more graphically sophisticated. Create a new image 2 pixels by 2 pixels in size. Then its simply a matter of coloring the opposite pixels, each with a shade selected from the safe palette. Save it as a gif.

A larger pattern can be created once you decide to experiment a little more - but the main thing to remember is that colors close to each other in shade turn out best because once displayed in the browser as a background, the result appears as a new solid color. Here is an example of one we prepared earlier - made from white and green. It gives us the desired hue we wanted, but nevertheless, because the base colors are quite different from each other, the effect is textured - quite stripy. That can be quite okay - it is just another alternative. Explorer displays this stripyness as a wipe action across or down the page - so you may want to avoid this aspect - or use it as an effect! Or create the 2x2 as a full browser width - say 800x50 - this works well.

doing.the.ditherbox
Now, if all this seems a bit too much trouble, or you aren't very confident with graphics thingummies, fear not! Ditherbox is here! Well, you still need to know a tiny weeny bit about graphics, but not much. Ditherbox is a neat little plug-in that does most of the tedious work for you. It is very small and exceptionally easy to load and use. You'll find it at www.ditherbox.com (funnily enough!). The makers have aimed it at photoshop users, however we loaded it into Corel Photopaint 7 with nary a problem, so it should be fine with most programs.

Course, it's not free - but if this aspect of web work really tickles your fancy, then you won't mind parting with a few measly dollars to satisfy your cravings. Unfortunately, the makers have disabled the final step in the free downloadable sample version - you can make up a hybrid color and play around with all sorts of combinations - you just can't use the end product as a workable gif. (Boo hiss!) Nevermind - you can use it to preview and sample various shade/pixel number variations. If you can't afford to actually buy the program, it can still be used in this way - then make up a hybrid yourself as described above.

more.stuff
STOP PRESS! The best alternative we have found is ColorMix - a java based program that dithers web safe colors for you, using either 2 or 3 colors. A gif is produced right then and there for you to take home. We love it and it's free!

Don Barnett, who we mentioned above has some hybrid seamless background tiles available free at his very clever and pretty site - check it out!

My old friend Andrew Ronayne recommends this site as an example of what can go wrong when not using the correct web color palette http://www.geocities.com/SoHo/2365/tip6.html and this one for general image management info http://www.jasc.com/resources.html and this one http://www.sumrallworks.com/freebies/buttonhole/psp/web/pspwt04/

for Paint Shop Pro tips on hybrids. Helpful, isn't he?

Ah, so much to learn. So little time

Well, that WAS exciting, wasn't it children? Now run along and marvel over these meanderings. Until next time when we think of something else to waffle on about.