An image colour picker/CSS generator using HTML5 Canvas and Drag+Drop
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Zoom and Pick

Zoom and Pick is a pure client-side tool to pick colours from an image and get the CSS representing these colours created for you.

Simply drag and drop an image onto the dropzone in the browser and you will see the image. move your mouse over the image to see a zoomed version in the dropzone. Click if you like an image and it will get added to the list of colours below the dropzone. You can remove colours by clicking the "x" next to them.

Once you have your colours, click the "get code" button to get an HTML document with the corresponding CSS and colour swatches.

Your colours are stored on the computer for subsequent visits, so should you make a mistake like dropping an image outside the dropzone, nothing is lost.

You can see the tool in action here and there is a screencast on YouTube


Zoom and Pick needs a Desktop/Laptop machine with mouse access - it will not run on iPads and phones as touch doesn't give you the same accuracy. This is a tool, not a game.

It was tested in Chrome, Firefox and Safari on OSX Lion - right now Opera does not work but vexingly also doesn't complain.