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 More >