RGB color parser in JavaScript

What is it

A JavaScript class that accepts a string and tries to figure out a valid color out of it. Some accepted inputs are for example:

• rgb(0, 23, 255)
• #336699
• ffee66
• fb0
• red
• darkblue
• cadet blue

For more accepted inputs - see the demo.

Here's the javascript class - rgbcolor.js.

Some history / motivation

I was playing around with an idea (will post later) and I needed to get color information using the so-called computed styles. The thing is that I needed the exact amounts of Red, Green and Blue, so I needed to parse the value returned.

In FireFox when you get a computed style, it's in the format rgb(xxx, yyy, zzz)
In IE, it's #xxyyzz.
So I needed to parse both formats.

I decided to take my script one step further and make the color parsing into a seperate class. Then I added those string values - red, green, etc.

The result is something you can use, among other purposes, as a friendlier user input field.

How to use

The class is defied in a function RGBColor(). When you instantiate the class, you pass the string to be poarsed. The class has variables for the three channels - red, green and blue and methods to get the parsed value - toHex() and toRGB().

Example use:

var color = new RGBColor('darkblue');
if (color.ok) { // 'ok' is true when the parsing was a success
    // alert channels
    alert(color.r + ', ' + color.g + ', ' + color.b);
    // alert HEX and RGB
    alert(color.toHex());
    alert(color.toRGB());
}

How it works

• The class accepts a string
• Any leading # is stripped; spaces are stripped
• There' s a check against a list of valid color names, such as "red" and "darkorange" and these are mapped to a Hex code
• An array of objects is defined that have one regexp property and a function that knows what to do if the regexp find a match
• There is a quick validation that the channel values are between 0 and 255
• The two getters are defined - toHex() and toRGB()
• Finally there is a function that acts as both a self-documentation and self-uinttest, where a bunch of accepted values are automatically run through the class and parsed and the result is displayed as a help text.

The idea of the array of objects containing a regexp and a handler function is Simon Willison's. He did a script to parse dates, which I used and modified to work with time entries.

In my time parser I also introduced the idea of the self-documenting regexps and the help/test function which I'm reusing here again.

All yours

Feel free to use the code for your own color picker tool or whatever you feel like. If you let me know how you use it, that would be even greater. Meanwhile any other comments are highly appreciated.

And if I may rephrase a TV ad:
Allowing your users to enter the color "Dark Khaki" - priceless! 😉

Tell your friends about this post on Facebook and Twitter