ColorSuckr: Create color schemes based on images
My latest personal project is called ColorSuckr. In a nutshell, it will look at an image on the web and tell you the 12 most common colours used in that image, useful for creating colour schemes for design projects and/or websites.
Aside from my main body of freelance work, I like to develop small personal projects from time to time. This allows me to try out new things, experiment a little and generally do whatever I want to. There are a few of these projects I have already that tick along quite nicely such as Bandnamr and Mockupr and now - ColorSuckr.
This project spawned from one of my current sites, Urban Dirty, where colour schemes are suggested based on the photo being shown. This process was previously handled by me having to add specific tags to each image which declared the first 2 or 3 colours that came into my head. It worked, but was laborious and clumsy, so I was keen to find a way to automate this process. Eventually I discovered how to extract the common colours from an image using ImageMagick, which made the colour automatic and the uploading process faster. See that process in action on this photo on Urban Dirty.
It worked so well, I thought why not make a stand-alone version of this, that will look at any photo on the web, not just the ones on Urban Dirty. And that is when ColorSuckr came about.
There are similar services currently on the web which will do similar things, but as a wise man once said, if no-one else is doing what your doing, it’s usually because no-one wants it. So I wanted to add my own tweaks and features to ColorSuckr which would make it a little different to other colour scheme services. Here is a list of the main features of ColorSuckr:
- Hex code references, web safe references and RGB values provided.
- Flickr integration. You can search for photos and input full Flickr photo page urls (instead of just the image url). If a photo from Flickr is submitted, ColorSuckr will find extra info about the image such as who took it, its title and license.
- Drag and drop colour results. You can grab the colour strips and drag the colours anywhere on the page. Handy for sliding the colour up over the photo or simply rearranging the results. You can also show and hide the colour info text in case you want to focus on just colours and no textual info.
- Getting images from a webpage. The idea is to enter the direct url of an image (e.g. http://l.yimg.com/g/images/home_photo_orangeacid.jpg, but should you put in an actual website page (e.g. http://abduzeedo.com) then ColorSuckr will scan the page for images and list them out, prompting you to choose one.
- Swatch file download. If you like the colours that are given to you, you can download an ASE (Abode Swatch Exchange) file and load up the colours straight into Photoshop or Illustrator.
- Colour scheme suggestions. Colour suggestions are taken one step further by tapping into the services offered by Colourlovers. If you like a particular colour that is offered, click on the ‘Show color chemes’ link and you’ll get back 6 pallettes based on that colour.
- Simple API. The image colour results are listed out ion teh main section of teh page, but in addition, you can get the results in 3 data formats, RSS, JSON and XML. This allows you to use the ColorSuckr service on your own site or for your own projects.
- URL shortener. ColorSuckr offers permalinks to images, but they can be long - for example http://colorsuckr.com/?img=http://farm4.static.flickr.com/3138/3083683359_3b5d124274.jpg. So you’ll find included an option to get a short url for your image, so that long url would become http://bit.ly/uIsrf
- Firefox Add-on. Pasting image urls can be fiddly, so to make the whole process easier, ColorSuckr has an add-on for Firefox which allows you to right click any image ion the web, go straight to ColorSuckr and see the extracted colours straight away. This has proved to be quite a popular addition with nearly 4000 downloads in just under 2 weeks (as I write this).
One thing that I was bowled over by when launching this, was all the coverage ColorSuckr got. There was (and still is) lots of tweets about the site, plus mentions from some of the pied pipers of Twitter such as Designer Depot and Smashing Magazine to name a few. Plus links and features on sites like Boing Boing, Download Squad and Sitepoint. I was bowled over by the reception.
So there you have it - the concept is simple, the project was great fun to build and develop, the end results is something I am very pleased with, and also find useful. Please go and try it out and have fun with it.
