Read my book

I wrote books about Webpack and React. Check them out!

Wednesday, July 25, 2012

Colorjoe - a Scaleable Color Picker

Colorjoe is a color picker I developed particularly scaleability in mind. This shows in two ways. It doesn't depend on any external images by default (uses CSS gradients). It is also fairly simple to extend thanks to its plugin API. Best of all the widget doesn't depend on any external framework. Just drop it to your project and off you go.

Colorjoe supports two basic types for picking colors (RGB, HSL). You can also make various fields (RGB, HSL, HSV, CMYK + A) visible if you want. Hex and selected color are supported naturally.

If this sounds interesting to you, check out the project page. You'll find a couple of demos there. The README contains more technical documentation.

Brief History

XKCD 927: Standards by Randall Munroe (CC BY-NC 2.5)
I developed the original version a year ago as I was really unhappy about the situation back then. There were a lot of color pickers around but not any of them did quite what I wanted. As a result I ended up writing my own. I guess this what the previous guys thought when they developed theirs.

As I had some time around April and May I decided to revive the project. The original hack depended on a framework so I got rid of that dependency. I did the initial port at jsbin just for the kicks (not working due to changes made to color.js). After that I moved the development to GitHub. That's where the project resides now.

Around two weeks ago the project was revived yet again as a friend of mine, Esa-Matti Suuronen, decided to integrate the picker into a project of his. During the process we came upon a few bugs which were promptly squished. Also some new functionality was added.

One of the interesting bits provided by Esa-Matti was Grunt based build file. Essentially that makes it easy to create both debug and production (minified) builds with minimal effort. You can also provide some metadata about your project in a Grunt file and then have it append that to your build files. Nice little project!

I also made the project demo page somewhat nicer at the time and for some random reason decided to share it at Reddit. Usually when I post something there it either doesn't show up or gets ignored. Surprisingly it didn't go that way this time. Instead I got some positive feedback. Someone even posted it at Hacker News where it got some additional visibility.

At one point a guy known as Munter contacted me. He provided a nice color library for me to use. This allowed me to add CMYK field support to the project. I believe this was a good way to go. I can focus on maintaining the widget without having to deal with possible issues in my color library too. If anyone is interested in some more exotic colorspaces (LAB, XYZ), the library definitely would allow to add support for those in the widget.

One interesting offshoot of the project was drag.js (demo page). It provides a way to make elements draggable. There is also functionality that makes it possible to write sliders (1d, 2d). Perhaps I'll make it possible to catch "drops" someday making it a proper drag and drop library. The library encapsulates all sorts of nasty details I really don't want to even think about. It gets that ugly due to browser differences sometimes.

Media Visibility

Reddit and Hacker News were just a tip of an iceberg. Several mediums took a note of the widget. It even showed up on the popular JavaScript Weekly newsletter. Just to tip off my hat these guys I'll mention a few. You can find the rest at Topsy.

  • MakeUseOf added the widget to their directory. I had never heard of the site before they let me know they added it there. Looks quite a big portal to me.
  • WebResources Depot covered the widget as well.
  • Softpedia added an entry for it.
  • Estudiosinnova covered it on their blog.

I'm sure I forgot someone. Anyway, thanks for the coverage. :)


It's really interesting to see how things can go sometimes. You write something you think is entirely trivial and then it gets kind of popular. In this case the cycle fed on itself. I got more motivated to write and revamp the widget as it got some attention. As a result we all have a nicer widget to use. It also resulted in a little project (drag.js) that might grow into something interesting later on.

Let me know if you think there are ways I can improve the widget. I'll definitely look into it. It should contain plenty of functionality already but it's entirely possible it's still missing something obvious.