HSL Color Wheel

Instructions:

  1. Mouse over various colors to see their relationship to the original color
  2. If you really want to be specific, type your color into the handy form field below!
  3. Click on any color swatch to make that color the Current Color!
  4. Find color schemes for the current color by selecting the corresponding radio button.

About this Demo

This demo was inspired by the Sass CSS framework. I think CSS Preprocessors often get a bad rap because of what some inexperienced developers can do with it. To me, Sass/Compass is much more than nesting, mixins and variables. There is some extremely powerful functionality which javascript developers get to use all the time. Now imagine if some of that work can be done with CSS -- And be able to offload some of that work from the js engine?

I wanted to demonstrate some of the programming power that Sass and Compass provides. For example, the circular nature of the color wheel is achieved using Sass iterators and Math helpers from Compass. An initial non-interactive demo generated the hue, saturation and lightness modifications based on one color using Sass's color functions. Later, to bring interactive selection of new colors from the wheel, I brought in the color-js framework.

Now, this is a first step. I've open-sourced this demo, so feel free to fork it, use it, abuse it, mutate it -- go nuts with it. I welcome any suggestions/pull requests/issues in the tracker. PLEASE let me know what you think. @nickcooley or nick@clrpick.me

Credits

This demo takes advantage of the following tools/demos/frameworks:

Thanks to the following folks who took a look and gave suggestions:

This is not the first time anyone's built a color-picking web application. Here are a few which served as inspirations

Try a color:

Hue:

Current Color:

Saturation:

    Lightness:

      Fork me on GitHub