How to get colours of a website?

This one is going to be short and simple (even though it would make a nice extension to the configurator from the previous article).

First, we’ll need a screenshot of a website.

Manet

Manet is a cool Node.js app by Vladislav Bauer. To get it up and running you only have to:

  1. Install a headless web browser npm install -g phantomjs
  2. Install Manet npm install -g manet
  3. Run Manet manet

If everything goes well you should see at http://0.0.0.0:8891 the same UI as at the example deploy by Bauer himself.

Sidenote

Instead of PhantomJS (WebKit) you could use an almost-headless browser (SlimerJS - Gecko) as described in Manet’s docs.

Generating the colour palette

OK, so now I’m going to create my own website where some client-side JavaScript will try to find the dominant colours of another website. As an example I’ll use the screenshot (which I’ll create using Manet and embed on my website) of T-Mobile’s website.

Of course it’s also possible to achieve the same server-side with Node.js.

I’ll have to run Manet with CORS option manet --cors, because my website and Manet are going to be on different ports and that’s an example of violating the same-origin policy.

I’m not going to discuss the whole code which is available on GitHub.

I’ve used Color Thief by Lokesh Dhakar. The only downside it has, is that it may return a different number of colours than you actually wish in the settings. As an alternative one can use e.g. Vibrant.js by Jari Zwarts.

One important thing is the line img.crossOrigin = "Anonymous"; Without it the browser wouldn’t let Color Thief grab the colours from the screenshot.

Also please remember to set the URL of your own instance of Manet at var src = "http://192.168.0.12:8891/?url="+url;

The end result should look like on the picture below: alt text