Read Color Palette from Photoshop ACO file or Image

AdnanUncategorizedLeave a Comment

image

I love Graphics Design in general but unfortunately I am not great at choosing colors, … let alone do the actual designs. Anyways, I often browse Dribbble for inspiration. What’s great about Dribbble is that, for each graphics design (for example) the user can download the color palette as a Photoshop ACO format. This is brilliant news for designers who use Photoshop, but less so for developers. To use the colors I might be interested in from Dribbble, I had to open Photoshop and transfer these colors into CSS classes, manually (what a drag).

I looked around for something that might help ease the pain, and sure enough, I found a great C program (photoshop-aco2UIColors) that would read your ACO files and convert them directly into HTML, perfect! .. Well, not really! I had to compile the C program to binary on the command line to generate the desired outcome. Reminded me when I started programming in C, in 1991. But we’re in 2015, something has to be done about this. I looked online for alternatives to this approach and it doesn’t seem that anyone has tackled this problem.

So with great enthusiasm to build a modern solution to this problem, I set up an Open Source project on Github. Initially, I thought this will take me few hours, … few days later, I have completed this small project with great results, if I may say so myself ))

Here’s the link to Color Palette Toolkit

Color Palette Toolkit is a lightweight JavaScript library that reads the color values from a PhotoShop ACO file or an Image file and turns them into a list of named colors (in CSS and HTML format). The cool thing about this toolkit is that, it will give humanly names to each extracted color which is then used to generate CSS class names.

The core of this project is built around the C program I found on github. Initially I thought that I might be able to port it to JavaScript using Emscripten, but as it turned out, it was not an easy task to install Emscripten library, and after half a day wasted, I decided to do it by hand. Yup, manually convert the C program into Javascript. Surprisingly, that took less time, who knew.

Admittedly, I went slightly over the board with this project, I added a color palette grabber from an Image file as well as, giving the user the option to get a lighter or darker shades of the palette colors extracted (or both). It took 12 Open Source projects (credits) to finish this one, .. seems like an overkill.

Enjoy

Here’s the link to the Live Demo (by Web Semantics, Inc)