HTML5 Makes a Great Color Picker

By | September 18, 2015

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 <canvas> element to load the entire web page and then use the getImageData function to extract colors.

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).

Leave a Reply

Your email address will not be published. Required fields are marked *