accentColor Script

December 17th, 2011 :: Web Development

Out of curiosity, I started coding on a script to get the accent colors of external websites, kind of like Chrome does it in the most visited sites thumbnails. The script can be used to automatically give your outgoing links appropriate colors and make them look more interesting.

a jigsaw piece

The script works by calculating the dominant color of the site’s favicon, which usually works pretty well to determine the web page’s signature color. I’m using a canvas object to analyze the pixel data, which restricts the browser suppport to more modern browsers. It would be possible to widen the browser support by parsing the image file data directly, but considering that favicons come in many different formats, this would require too much work and code for such a small visual effect.

CORS is used to connect to getFavicon, a service by Jason Cartwright that retrieves the favicon of any given URL. There is also a PHP proxy file that you can use on your own server as fallback for browsers without CORS support.

I’ve created a pretty demo page for the script, check it out below.

Demo