    /**
     * Represents an RGB color and provides helper functions get
     * color components in HSL color space.
     */
    Ext.define('Ext.draw.Color', {

        /* Begin Definitions */

        /* End Definitions */

        colorToHexRe: /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
        rgbRe: /\s*rgb\s*\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)\s*/,
        hexRe: /\s*#([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/,

        /**
         * @cfg {Number} lightnessFactor
         *
         * The default factor to compute the lighter or darker color. Defaults to 0.2.
         */
        lightnessFactor: 0.2,

        /**
         * Creates new Color.
         * @param {Number} red Red component (0..255)
         * @param {Number} green Green component (0..255)
         * @param {Number} blue Blue component (0..255)
         */
        constructor : function(red, green, blue) {
            var me = this,
                clamp = Ext.Number.constrain;
            me.r = clamp(red, 0, 255);
            me.g = clamp(green, 0, 255);
            me.b = clamp(blue, 0, 255);
        },

        /**
         * Get the red component of the color, in the range 0..255.
         * @return {Number}
         */
        getRed: function() {
            return this.r;
        },

        /**
         * Get the green component of the color, in the range 0..255.
         * @return {Number}
         */
        getGreen: function() {
            return this.g;
        },

        /**
         * Get the blue component of the color, in the range 0..255.
         * @return {Number}
         */
        getBlue: function() {
            return this.b;
        },

        /**
         * Get the RGB values.
         * @return {Number[]}
         */
        getRGB: function() {
            var me = this;
            return [me.r, me.g, me.b];
        },

        /**
         * Get the equivalent HSL components of the color.
         * @return {Number[]}
         */
        getHSL: function() {
            var me = this,
                r = me.r / 255,
                g = me.g / 255,
                b = me.b / 255,
                max = Math.max(r, g, b),
                min = Math.min(r, g, b),
                delta = max - min,
                h,
                s = 0,
                l = 0.5 * (max + min);

            // min==max means achromatic (hue is undefined)
            if (min != max) {
                s = (l < 0.5) ? delta / (max + min) : delta / (2 - max - min);
                if (r == max) {
                    h = 60 * (g - b) / delta;
                } else if (g == max) {
                    h = 120 + 60 * (b - r) / delta;
                } else {
                    h = 240 + 60 * (r - g) / delta;
                }
                if (h < 0) {
                    h += 360;
                }
                if (h >= 360) {
                    h -= 360;
                }
            }
            return [h, s, l];
        },

        /**
         * Return a new color that is lighter than this color.
         * @param {Number} factor Lighter factor (0..1), default to 0.2
         * @return Ext.draw.Color
         */
        getLighter: function(factor) {
            var hsl = this.getHSL();
            factor = factor || this.lightnessFactor;
            hsl[2] = Ext.Number.constrain(hsl[2] + factor, 0, 1);
            return this.fromHSL(hsl[0], hsl[1], hsl[2]);
        },

        /**
         * Return a new color that is darker than this color.
         * @param {Number} factor Darker factor (0..1), default to 0.2
         * @return Ext.draw.Color
         */
        getDarker: function(factor) {
            factor = factor || this.lightnessFactor;
            return this.getLighter(-factor);
        },

        /**
         * Return the color in the hex format, i.e. '#rrggbb'.
         * @return {String}
         */
        toString: function() {
            var me = this,
                round = Math.round,
                r = round(me.r).toString(16),
                g = round(me.g).toString(16),
                b = round(me.b).toString(16);
            r = (r.length == 1) ? '0' + r : r;
            g = (g.length == 1) ? '0' + g : g;
            b = (b.length == 1) ? '0' + b : b;
            return ['#', r, g, b].join('');
        },

        /**
         * Convert a color to hexadecimal format.
         *
         * **Note:** This method is both static and instance.
         *
         * @param {String/String[]} color The color value (i.e 'rgb(255, 255, 255)', 'color: #ffffff').
         * Can also be an Array, in this case the function handles the first member.
         * @returns {String} The color in hexadecimal format.
         * @static
         */
        toHex: function(color) {
            if (Ext.isArray(color)) {
                color = color[0];
            }
            if (!Ext.isString(color)) {
                return '';
            }
            if (color.substr(0, 1) === '#') {
                return color;
            }
            var digits = this.colorToHexRe.exec(color),
                red,
                green,
                blue,
                rgb;

            if (Ext.isArray(digits)) {
                red = parseInt(digits[2], 10);
                green = parseInt(digits[3], 10);
                blue = parseInt(digits[4], 10);
                rgb = blue | (green << 8) | (red << 16);
                return digits[1] + '#' + ("000000" + rgb.toString(16)).slice(-6);
            }
            else {
                return color;
            }
        },

        /**
         * Parse the string and create a new color.
         *
         * Supported formats: '#rrggbb', '#rgb', and 'rgb(r,g,b)'.
         *
         * If the string is not recognized, an undefined will be returned instead.
         *
         * **Note:** This method is both static and instance.
         *
         * @param {String} str Color in string.
         * @returns Ext.draw.Color
         * @static
         */
        fromString: function(str) {
            var values, r, g, b,
                parse = parseInt,
                firstChar = str.substr(0, 1),
                colorValue;

            if (firstChar != '#') {
                colorValue = Ext.draw.Color.cssColors[str];
                if (colorValue) {
                    str = colorValue;
                    firstChar = str.substr(0, 1);
                }
            }

            if ((str.length == 4 || str.length == 7) && firstChar === '#') {
                values = str.match(this.hexRe);
                if (values) {
                    r = parse(values[1], 16) >> 0;
                    g = parse(values[2], 16) >> 0;
                    b = parse(values[3], 16) >> 0;
                    if (str.length == 4) {
                        r += (r * 16);
                        g += (g * 16);
                        b += (b * 16);
                    }
                }
            }
            else {
                values = str.match(this.rgbRe);
                if (values) {
                    r = values[1];
                    g = values[2];
                    b = values[3];
                }
            }

            return (typeof r == 'undefined') ? undefined : new Ext.draw.Color(r, g, b);
        },

        /**
         * Returns the gray value (0 to 255) of the color.
         *
         * The gray value is calculated using the formula r*0.3 + g*0.59 + b*0.11.
         *
         * @returns {Number}
         */
        getGrayscale: function() {
            // http://en.wikipedia.org/wiki/Grayscale#Converting_color_to_grayscale
            return this.r * 0.3 + this.g * 0.59 + this.b * 0.11;
        },

        /**
         * Create a new color based on the specified HSL values.
         *
         * **Note:** This method is both static and instance.
         *
         * @param {Number} h Hue component (0..359)
         * @param {Number} s Saturation component (0..1)
         * @param {Number} l Lightness component (0..1)
         * @returns Ext.draw.Color
         * @static
         */
        fromHSL: function(h, s, l) {
            var C, X, m, i, rgb = [],
                abs = Math.abs,
                floor = Math.floor;

            if (s == 0 || h == null) {
                // achromatic
                rgb = [l, l, l];
            }
            else {
                // http://en.wikipedia.org/wiki/HSL_and_HSV#From_HSL
                // C is the chroma
                // X is the second largest component
                // m is the lightness adjustment
                h /= 60;
                C = s * (1 - abs(2 * l - 1));
                X = C * (1 - abs(h - 2 * floor(h / 2) - 1));
                m = l - C / 2;
                switch (floor(h)) {
                    case 0:
                        rgb = [C, X, 0];
                        break;
                    case 1:
                        rgb = [X, C, 0];
                        break;
                    case 2:
                        rgb = [0, C, X];
                        break;
                    case 3:
                        rgb = [0, X, C];
                        break;
                    case 4:
                        rgb = [X, 0, C];
                        break;
                    case 5:
                        rgb = [C, 0, X];
                        break;
                }
                rgb = [rgb[0] + m, rgb[1] + m, rgb[2] + m];
            }
            return new Ext.draw.Color(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
        }
    }, function() {
        var prototype = this.prototype;

        this.addStatics({
            //These functions are both static and instance. TODO: find a more elegant way of copying them
            fromHSL: function() {
                return prototype.fromHSL.apply(prototype, arguments);
            },
            fromString: function() {
                return prototype.fromString.apply(prototype, arguments);
            },
            toHex: function() {
                return prototype.toHex.apply(prototype, arguments);
            },
            //The CSS / SVG / X11 colors
            cssColors: {
                aliceblue: '#F0F8FF',
                antiquewhite: '#FAEBD7',
                aqua: '#00FFFF',
                aquamarine: '#7FFFD4',
                azure: '#F0FFFF',
                beige: '#F5F5DC',
                bisque: '#FFE4C4',
                black: '#000000',
                blanchedalmond: '#FFEBCD',
                blue: '#0000FF',
                blueviolet: '#8A2BE2',
                brown: '#A52A2A',
                burlywood: '#DEB887',
                cadetblue: '#5F9EA0',
                chartreuse: '#7FFF00',
                chocolate: '#D2691E',
                coral: '#FF7F50',
                cornflowerblue: '#6495ED',
                cornsilk: '#FFF8DC',
                crimson: '#DC143C',
                cyan: '#00FFFF',
                darkblue: '#00008B',
                darkcyan: '#008B8B',
                darkgoldenrod: '#B8860B',
                darkgray: '#A9A9A9',
                darkgreen: '#006400',
                darkgrey: '#A9A9A9',
                darkkhaki: '#BDB76B',
                darkmagenta: '#8B008B',
                darkolivegreen: '#556B2F',
                darkorange: '#FF8C00',
                darkorchid: '#9932CC',
                darkred: '#8B0000',
                darksalmon: '#E9967A',
                darkseagreen: '#8FBC8F',
                darkslateblue: '#483D8B',
                darkslategray: '#2F4F4F',
                darkslategrey: '#2F4F4F',
                darkturquoise: '#00CED1',
                darkviolet: '#9400D3',
                deeppink: '#FF1493',
                deepskyblue: '#00BFFF',
                dimgray: '#696969',
                dimgrey: '#696969',
                dodgerblue: '#1E90FF',
                firebrick: '#B22222',
                floralwhite: '#FFFAF0',
                forestgreen: '#228B22',
                fuchsia: '#FF00FF',
                gainsboro: '#DCDCDC',
                ghostwhite: '#F8F8FF',
                gold: '#FFD700',
                goldenrod: '#DAA520',
                gray: '#808080',
                grey: '#808080',
                green: '#008000',
                greenyellow: '#ADFF2F',
                honeydew: '#F0FFF0',
                hotpink: '#FF69B4',
                indianred: '#CD5C5C',
                indigo: '#4B0082',
                ivory: '#FFFFF0',
                khaki: '#F0E68C',
                lavender: '#E6E6FA',
                lavenderblush: '#FFF0F5',
                lawngreen: '#7CFC00',
                lemonchiffon: '#FFFACD',
                lightblue: '#ADD8E6',
                lightcoral: '#F08080',
                lightcyan: '#E0FFFF',
                lightgoldenrodyellow: '#FAFAD2',
                lightgray: '#D3D3D3',
                lightgreen: '#90EE90',
                lightgrey: '#D3D3D3',
                lightpink: '#FFB6C1',
                lightsalmon: '#FFA07A',
                lightseagreen: '#20B2AA',
                lightskyblue: '#87CEFA',
                lightslategray: '#778899',
                lightslategrey: '#778899',
                lightsteelblue: '#B0C4DE',
                lightyellow: '#FFFFE0',
                lime: '#00FF00',
                limegreen: '#32CD32',
                linen: '#FAF0E6',
                magenta: '#FF00FF',
                maroon: '#800000',
                mediumaquamarine: '#66CDAA',
                mediumblue: '#0000CD',
                mediumorchid: '#BA55D3',
                mediumpurple: '#9370DB',
                mediumseagreen: '#3CB371',
                mediumslateblue: '#7B68EE',
                mediumspringgreen: '#00FA9A',
                mediumturquoise: '#48D1CC',
                mediumvioletred: '#C71585',
                midnightblue: '#191970',
                mintcream: '#F5FFFA',
                mistyrose: '#FFE4E1',
                moccasin: '#FFE4B5',
                navajowhite: '#FFDEAD',
                navy: '#000080',
                oldlace: '#FDF5E6',
                olive: '#808000',
                olivedrab: '#6B8E23',
                orange: '#FFA500',
                orangered: '#FF4500',
                orchid: '#DA70D6',
                palegoldenrod: '#EEE8AA',
                palegreen: '#98FB98',
                paleturquoise: '#AFEEEE',
                palevioletred: '#DB7093',
                papayawhip: '#FFEFD5',
                peachpuff: '#FFDAB9',
                peru: '#CD853F',
                pink: '#FFC0CB',
                plum: '#DDA0DD',
                powderblue: '#B0E0E6',
                purple: '#800080',
                red: '#FF0000',
                rosybrown: '#BC8F8F',
                royalblue: '#4169E1',
                saddlebrown: '#8B4513',
                salmon: '#FA8072',
                sandybrown: '#F4A460',
                seagreen: '#2E8B57',
                seashell: '#FFF5EE',
                sienna: '#A0522D',
                silver: '#C0C0C0',
                skyblue: '#87CEEB',
                slateblue: '#6A5ACD',
                slategray: '#708090',
                slategrey: '#708090',
                snow: '#FFFAFA',
                springgreen: '#00FF7F',
                steelblue: '#4682B4',
                tan: '#D2B48C',
                teal: '#008080',
                thistle: '#D8BFD8',
                tomato: '#FF6347',
                turquoise: '#40E0D0',
                violet: '#EE82EE',
                wheat: '#F5DEB3',
                white: '#FFFFFF',
                whitesmoke: '#F5F5F5',
                yellow: '#FFFF00',
                yellowgreen: '#9ACD32'
            }
        });

    });