A while back, I stumbled upon a nice little class in Ext JS: Ext.draw.Color. It’s pretty much what it sounds like: a helper class for dealing with color (shocking!). Behind the scenes, Ext.draw.Color represents an RGB color, but provides a number of helpful methods for transforming the color, such as changing luminosity, converting to HSL values, etc. I can’t sleep right now, so I thought it might be interesting to show a few examples of this in action.

The Proverbial Hello World of Color

Of course, the natural place to begin is at the beginning, so let’s create a color. There’s not much to it. While there are a few other ways to go about it, we’ll use the handy create() method. You can pass a variety of “colorish” arguments to it to create your color. For example, let’s say we want to create the CSS color “yellowgreen”. We can do so in many ways:

• An array of RGB values – [154, 205, 50] // yellowgreen
• Positional RGBA args – 154, 205, 50, 1 // yellowgreen
• Hex color – #9acd32 // yellowgreen
• CSS RGB syntax – rgb( 154, 205, 50 ) // yellowgreen
• CSS RGBA syntax – rgba( 154, 205, 50, 1 ) // yellowgreen
• CSS color name – yellowgreen

Here’s an example using all of these scenarios:

Ok, admittedly not the flashiest example. But hey, we were able to create colors in a variety of ways. Flexibility compensates for flashy UI any day 🙂

Creating an HSL Color

In some scenarios, you may only have an HSL color. No problem! With Ext.draw.Color, you can easily create a usable color by using fromHSL(). Sticking with our “yellowgreen” example, let’s  start from the HSL values (79.74, 0.61, .5) for this color, and create a color. The signature of this method requires that we supply the following arguments:

• h (Hue, 0…360)
• s (Saturation, 0…1)
• l (Lightness, 0…1)

Of course, we might want the reverse: given an RGB color, perhaps we want to know the HSL equivalent? We’re in luck, as Ext.draw.Color includes a getHSL() method which returns an array representation of the HSL values.

Here’s an example, showing both the creation of a color from HSL values, as well as retrieving them again.

NOTE: The same methods exist for dealing with HSV values as well (fromHSV(), getHSV()).

Lightening and Darkening

The subtlety of color is created not only in the variety of hues, but in the relative lightness and darkness of the color itself. Ext.draw.Color includes two helpful methods for lightening and darkening colors: createLighter() and createDarker(). Both methods accept a single argument–“factor”–which represents the percentage by which the color will be lightened or darkened. Ext.draw.Color itself defines a default “lightnessFactor” of 20%, so if you don’t pass an argument at all you’ll get a nice 20% increase or decrease of lightness, respectively.

So “yellowgreen” is nice and all, but let’s experiment with a 15% lighter version, and a 23% darker version, just for kicks:

NOTE: If you look closely at the code in the Fiddle above, you’ll notice an important thing to remember: createLighter() and createDarker() return new Ext.draw.Color instances, instead of modifying the original.

That Gray Area

Another neat little method included in Ext.draw.Color is the getGrayscale() method. This returns the “gray” value of the color, from 0 to 255. I know, I know, you’ve been DESPERATELY wondering what the “gray” value of yellowgreen is. Prepare to have your life changed:

toString()

If you’ve been looking at ANY code above, you’ve seen the toString() method used throughout. This method will *normally* return the hex color format of the color. This is the case when the “alpha” part of RGBA is 1. If alpha < 1, toString() will actually return the CSS rgba() format of the color. You’ve been waiting patiently…here’s the example 🙂

Conclusion

There we have it, Ext.draw.Color. A small class, but lots of possibilities. If you’re interested, check out the “Color Dashboard” that I made to experiment with this class. You can not only create colors in various ways, but also dynamically tweak lightness/darkness and see live conversions to HSL/HSV/Grayscale. It even provides a basic color scheme generator. Enjoy!