Project: color.js

The theme I’ve been using for my blog uses LESS as its CSS preprocessor. I recently made my fork switch to Sass. There are plenty of blogs that compare the two technologies, so I won’t go into the comparison in this post. I might write soon on why I decided to choose Sass, but that’ll have to wait.

For making the transition, I used an online css2scss converter and noticed something interesting. The tool was coming up with names for the colors being used in the css. For some reason I wanted to see if I could figure it a way myself as well (I could generate easy to remember (potentially programmatically generated) names for my constants, this way.

So I started playing with colours with the hope to get somewhere with just the names. I very quickly realized that I can pack a few more operations into a library and use it for any other project I work on. This is where color.js came into existence.

color.js is a library for JavaScript that hopes to provides easy operations over hex colors. The project is open source so please feel free to take a look for yourself and please suggest improvements (Pull Requests are welcome!).

However to give you a taste, here’s a sample on how we can currently use it (More samples are available here):

• Initialization and assignment:

  var color = Color('#123456');

• Check If the colour is valid:

  color.isValid(); // true

• Color name (find approximate, if exact is missing):

  color.getName(); // taupe_approx

• Get Colour models:

    color.getRGB(); // 18, 52, 86
  
    color.getHSL(); // 148, 166, 52
  
    color.getYUV(); // 0.179, 0.0868, -0.095
    

• Gradient helpers:

    color.getShades(5); 
  
    // #123456,#0e2a44,#0a2032,#061620,#020c0e,#000000
  
    color.getTints(5); 
  
    // #123456,#163e68,#1a487a,#1e528c,#225c9e,#FFFFFF
    

I know I have a long way to go with this library, but it’s a nice start :)

regards