JS accentColor Script

How Is This Done?

The script determines the website's accent color by analyzing its favicon. More often than not, the dominant color of the site's icon is the same as its signature color.

Credit goes to Jason Cartwright and his getFavicon service, which is used to access the favicons.

How Do I Use This?

Simple. Include the script on your site, and call the getAccentColor function. The function takes an object as a parameter with four properties: url, onComplete, proxy and onError. The proxy and onError parameters are optional.

getAccentColor({
  url: "twitter.com",
  onComplete: function(color) {
    // The color variable is a string with the format rgb(R, G, B).

    // Here's an example of how to set the text color of a link
    document.getElementById("your-link").style.color = color;
    // Or in jQuery
    $("#your-link").css("color", color);
  },
  // Optional parameters below
  proxy: "path/to/your/proxy.php",
  onError: function(error) {
    // The error variable is a string with an error message.
  }
});

CORS Fallback with a Proxy

The script uses CORS to connect to cross domain services. Since this isn't fully supported by all browsers, you can use the PHP proxy file that is provided with the script as fallback. This extends the support to all canvas supporting browsers.

Download