Webmonkey » color

CLUT file

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

In computer graphics, a color look-up table, or CLUT, is the set of available colors for a given application.

For example, a 24-bit system can display 16 million unique colors, but a given program would use only 256 of them at a time if the display is in 256-color mode. The CLUT in this case would consist of the 16 million colors, but the program’s palette would contain only the 256-color subset. To avoid dithering (i.e., varying the pattern of dots in an image) on 8-bit machines, you should only use colors from a predesignated CLUT.

CMYK

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

CMYK stands for cyan magenta yellow and blacK and is a color system used in the offset printing of full-color documents.

Offset uses cyan, magenta, yellow, and black inks and is often referred to as “four-color” printing. Monitors use red, green, and blue light instead, so they display images using a different color system called RGB. One of the great problems of the digital age has been matching colors between these two systems; i.e., taking a digital RGB image and making it look the same in print using CMYK. These problems are addressed by applications such as the Pantone Matching System.

Grayscale

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

A grayscale image uses only shades of gray to represent an image.

Black-and-white photographs can use a virtually unlimited number of shades of gray, but most computers can display only 16 or 256. To grayscale is to convert a continuous-tone image, like a black-and-white photograph, to an image made up of pixels. Grayscaling is different from dithering, which uses either black or white pixels next to one another to simulate shades of gray. In grayscaling, each individual pixel can be a different shade of gray.

Hexadecimal

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

The hexadecimal (base 16) number system used for Web-page design consists of 16 unique symbols:0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F.

For example, the decimal number 15 is equal to the hexadecimal number F. In HTML, an RGB color can be designated by

RRGGBB

with the first two numerals representing the amount of red, the second two the amount of green, and the last two the amount of blue. If you wanted your background to be red, you could write the code for a body background color as

Black is the absence of all color and white is the presence of all color, so in hexadecimal, black is at the bottom of the system (no red, green, or blue:

#000000

and white is at the top (the maximum amount of red, green, and blue:

#FFFFFF

Palette

Webmonkey Staff — Mon, 15 Feb 2010 20:45:47 +0000

Much like an oil painter with her palette of many unique color combinations, each operating system has its own palette. Many computers out there display only 256 colors at a time, and the Macintosh and Windows operating systems reserve about 40 colors out of the 256, leaving 216 available. Netscape Navigator, Microsoft Internet Explorer, and NCSA Mosaic implemented a 216-color palette that won’t dither (i.e., vary the pattern of dots in an image) on different platforms and is “browser safe” (in other words, these 216 colors will always look the same, no matter what platform or browser is being used). Theoretically.

HTML5 Makes a Great Color Picker

Scott Gilbertson — Wed, 23 Dec 2009 13:16:44 +0000

HTML5 is changing more than just websites — it’s changing the capabilities of browsers, as well. For example, a very clever use of the HTML5 canvas tag allows developer Heather Arthur’s Rainbow color scheme add-on for Firefox to extract a color palette from any webpage.

Because browser add-ons — those in Firefox and Chrome anyway — can be built using HTML, they too can take advantage of HTML5′s new tools. In Arthur’s case, that means using the HTML5

Now it’s true there are already some add-ons (and desktop software) that can do this, but the shortcoming of most such add-ons is that they simply parse a page’s DOM and extract CSS styles to build a color palette. That works just fine — unless key page elements are actually images.

Arthur’s method of putting the page in a canvas tag and then parsing that means that all the colors are extract since the entire page effectively becomes a single, parsable image.

Of course behind the scenes there’s a good bit more going on. For example, the average web page in Arthur’s testing turned out the use somewhere in the neighborhood of 10,000 colors (think of all the shades actually present in a simple button gradient and you can see why the number is so high). Obviously, displaying that many colors would be useless. So, the Rainbow add-on uses a clustering algorithm to figure out the predominant shades on the page.

Running algorithms tends to slow down your browser, but thanks to HTML5′s Web Workers component, the Rainbow add-on is remarkably snappy. The comments on Arthur’s post also suggest some further optimizations which would make it even faster.

In the end, Arthur has created a plugin that makes an admirable replacement for some desktop software and, even better, showcases yet another possible way to use HTML5. If you’re interested in the actual add-on, head over to the download page. (The add-on is still listed as experimental, but it hasn’t caused any problems for me on Firefox 3.6b5).

See Also: