Jesus 'n Jim
A mainly PC (some Mac) site w/Software, Computer Repair Info, How-To's on Using Computers
Technical Support 1-360-521-2060 (my business line cell)

html color lesson / scanner glossary

 

HTML Color Lesson

This is a training document for new web developers (so if you are very technical please excuse any misgivings over lpi/dpi and such).
Lesson glossary:
TWAIN
a special driver used to handle multiple scanners and digital cameras, which allows many programs such as word processors, paint, and presentation programs to take scanned images.  This doesn't apply to live video.
WIA
the alternative to TWAIN for XP and other up-to-date OS's. sometimes it works better, sometimes it doesn't.
RGB, HLS, HSV, HSI, HSB, L*,a*,b*, CMYK, YUV (composite video), YPbPr (analog component video), YCbCr (digital component video),
These are color systems. 
RGB (Red-Green-Blue) is "additive" color and is used for light-emitting
devices like computer monitors. RGB is best visualized as a cube, with red brightness as x axis, green on y axis, and blue on z axis, with the (0,0,0) point being black and (1,1,1) being white, and the color you pick is somewhere inside the cube.
TV's, however, use
HLS/YUV
(Luminance/Lightness, Chrominance/Tint/Hue, Saturation). For better visualization of these concepts, see these pages: pictures, text, equations, & FAQ (Frequently Asked Questions) , better pictures.  
HLS can be visualized as 2 cones end-to-end to look like a diamond.
Looking at the side, from the center out radially to the outside ring is Saturation.
Lightness is from bottom to top.
Hue is the angle you pick on the ring (looking down from the top).
On the image below, the top and side view are combined.
The ring is the top view.
The square is the side view, where left-to-right is saturation and down-to-up is lightness.
If you were to drop the Chroma (Hue) and Saturation, you would have black and white TV (see the black-to-white edge which is Luminance on the Saturation-Luminance square).


CMYK (Cyan Magenta Yellow Black) is used for printing presses and other light-reflecting mediums such as house paint or ink. 
Your ink jet printer probably uses subtractive colors like CMYK for output, but the printer driver converts from RGB automatically.  On a color wheel, CMY is a 45-degree rotation from RGB.
Red is Yellow + Magenta.
Because imperfections in CMY ink and paint accuracy, it doesn't produce a perfect black in print - it produces brown.
Black is added to compensate (I think I have this correct).
4-color process
CMYK is called a 4-color process (a printing term).
If you look on the bottom flaps of a cereal box you will see how many colors they use in their process.
Newer quality color printers use a 6-color process.
Your cereal box probably contains 3 to 8. Here is an example with 5.
24/32/36/48-bit color
(aka TRUE COLOR).  8 bits (256 shades) for Red, 8 bits for Green, and 8 bits for Blue.
HI-COLOR(16-bit color).  This is the largest color-palette based scheme.
Sometimes, however, it is rather arranged as some other scheme like 5-bit red 6-bit green 5-bit blue (565) and there would be no color palette.
resolution
same as DPI.
DPI
dots per inch.  higher DPI like 600-1200 is good for blowing up very small photographs.
lower DPI like 72dpi or 96dpi (screen resolution) is best for sending pictures in email.
LPI
LPI is used for halftone print ("screening") and is a somewhat similar concept to DPI, but uses varying sizes of diamonds of black or other colors.
GIF
(.GIF files) a lossless-compression image file format.  lossless is a great plus, but GIFs have very few colors (256 colors).  most photos have 5,000-60,000 colors, so you don't usually use GIF for photos.  sharp edges in a picture (such as computer text or lines or boxes) stay sharp.  Therefore GIFs are good for graphs, lines and text, or hand-drawn color graphics.  Unlike JPEG format, you can assign 1 color in the palette of 256 to be transparent (see-through to whatever is behind the image).  When you export/save the image to disk, pick "Compuserve GIF" as the file type, and an "options" button will let you work with color & transparencies.
JPEG
(.JPG or .JPE files) a lossy compression method and file format.
You choose the amount of compression, usually in the "options" button when you export/save the image to JPEG format.
Setting the compression to mid-scale should give the best bang for the buck.
JPEG has no color palette.  It is plain 24-bit color.
I get best compression & image quality at 26 on Paint Shop Pro.
Your image editor may vary because they use different scales for quality.
PNG
Portable Network Graphics, a lossless compression image file format.
Images usually come out bigger, but there are lots of nice options.
PNG supports both 24-bit color and 256-color palettes, but I think there is an option of supporting larger palettes for hi-color (64K color).
A palette optimizer can be run on the 24-bit color and get perfect output, but 2× the size of a JPEG.
PNG also supports alpha channels.
It is the default save format for Adobe Fireworks, but fw includes metadata I think.
MNG
Multiple Network Graphics, an animated PNG, lossless image compression and animation format.
Not in common use yet. Images usually come out bigger, but there are lots of options.
see wikipedia about MNG. Adobe Fireworks does not support this format and neither does Adobe Flash.