Source/WebCore/inspector/front-end/Color.js

   1 /*
   2  * Copyright (C) 2009 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Joseph Pecoraro
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 /**
  31  * Don't call directly, use WebInspector.Color.parse().
  32  * @constructor
  33  */
  34 WebInspector.Color = function(str)
  35 {
  36     this.value = str;
  37 }
  38
  39 WebInspector.Color.parse = function(str)
  40 {
  41     var maybeColor = new WebInspector.Color(str);
  42     return maybeColor._parse() ? maybeColor : null;
  43 }
  44 /**
  45  * @param {number=} a
  46  */
  47 WebInspector.Color.fromRGBA = function(r, g, b, a)
  48 {
  49     return WebInspector.Color.parse("rgba(" + r + "," + g + "," + b + "," + (typeof a === "undefined" ? 1 : a) + ")");
  50 }
  51
  52 WebInspector.Color.fromRGB = function(r, g, b)
  53 {
  54     return WebInspector.Color.parse("rgb(" + r + "," + g + "," + b + ")");
  55 }
  56
  57 WebInspector.Color.prototype = {
  58     /**
  59      * @return {string}
  60      */
  61     get shorthex()
  62     {
  63         if ("_short" in this)
  64             return this._short;
  65
  66         if (!this.simple)
  67             return "";
  68
  69         var hex = this.hex;
  70         if (hex.charAt(0) === hex.charAt(1) && hex.charAt(2) === hex.charAt(3) && hex.charAt(4) === hex.charAt(5))
  71             this._short = hex.charAt(0) + hex.charAt(2) + hex.charAt(4);
  72         else
  73             this._short = hex;
  74
  75         return this._short;
  76     },
  77
  78     /**
  79      * @return {string}
  80      */
  81     get hex()
  82     {
  83         if (!this.simple)
  84             return "";
  85
  86         return this._hex;
  87     },
  88
  89     set hex(x)
  90     {
  91         this._hex = x;
  92     },
  93
  94     /**
  95      * @return {Array.<number>}
  96      */
  97     get rgb()
  98     {
  99         if (this._rgb)
 100             return this._rgb;
 101
 102         if (this.simple)
 103             this._rgb = this._hexToRGB(this.hex);
 104         else {
 105             var rgba = this.rgba;
 106             this._rgb = [rgba[0], rgba[1], rgba[2]];
 107         }
 108
 109         return this._rgb;
 110     },
 111
 112     set rgb(x)
 113     {
 114         this._rgb = x;
 115     },
 116
 117     /**
 118      * @return {Array.<number>}
 119      */
 120     get hsl()
 121     {
 122         if (this._hsl)
 123             return this._hsl;
 124
 125         this._hsl = this._rgbToHSL(this.rgb);
 126         return this._hsl;
 127     },
 128
 129     set hsl(x)
 130     {
 131         this._hsl = x;
 132     },
 133
 134     /**
 135      * @return {string}
 136      */
 137     get nickname()
 138     {
 139         if (typeof this._nickname !== "undefined") // would be set on parse if there was a nickname
 140             return this._nickname;
 141         else
 142             return "";
 143     },
 144
 145     set nickname(x)
 146     {
 147         this._nickname = x;
 148     },
 149
 150     /**
 151      * @return {Array.<number>}
 152      */
 153     get rgba()
 154     {
 155         return this._rgba;
 156     },
 157
 158     set rgba(x)
 159     {
 160         this._rgba = x;
 161     },
 162
 163     /**
 164      * @return {Array.<number>}
 165      */
 166     get hsla()
 167     {
 168         return this._hsla;
 169     },
 170
 171     set hsla(x)
 172     {
 173         this._hsla = x;
 174     },
 175
 176     /**
 177      * @return {boolean}
 178      */
 179     hasShortHex: function()
 180     {
 181         var shorthex = this.shorthex;
 182         return (!!shorthex && shorthex.length === 3);
 183     },
 184
 185     /**
 186      * @return {string}
 187      */
 188     toString: function(format)
 189     {
 190         if (!format)
 191             format = this.format;
 192
 193         switch (format) {
 194             case "original":
 195                 return this.value;
 196             case "rgb":
 197                 return "rgb(" + this.rgb.join(", ") + ")";
 198             case "rgba":
 199                 return "rgba(" + this.rgba.join(", ") + ")";
 200             case "hsl":
 201                 var hsl = this.hsl;
 202                 return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
 203             case "hsla":
 204                 var hsla = this.hsla;
 205                 return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
 206             case "hex":
 207                 return "#" + this.hex;
 208             case "shorthex":
 209                 return "#" + this.shorthex;
 210             case "nickname":
 211                 return this.nickname;
 212         }
 213
 214         return "invalid color format: " + format;
 215     },
 216
 217     /**
 218      * @return {Object}
 219      */
 220     toProtocolRGBA: function()
 221     {
 222         if (this._protocolRGBA)
 223             return this._protocolRGBA;
 224
 225         var components = this.rgba;
 226         if (components)
 227             this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]), a: Number(components[3]) };
 228         else {
 229             components = this.rgb;
 230             this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]) };
 231         }
 232         return this._protocolRGBA;
 233     },
 234
 235     /**
 236      * @param {number} value
 237      * @param {number} min
 238      * @param {number} max
 239      * @return {number}
 240      */
 241     _clamp: function(value, min, max)
 242     {
 243         if (value < min)
 244             return min;
 245         if (value > max)
 246             return max;
 247         return value;
 248     },
 249
 250     /**
 251      * @param {number|string} rgbValue
 252      * @return {number}
 253      */
 254     _individualRGBValueToFloatValue: function(rgbValue)
 255     {
 256         if (typeof rgbValue === "number")
 257             return this._clamp(rgbValue, 0, 255);
 258
 259         if (rgbValue.indexOf("%") === -1) {
 260             var intValue = parseInt(rgbValue, 10);
 261             return this._clamp(intValue, 0, 255);
 262         }
 263
 264         var percentValue = parseFloat(rgbValue);
 265         return this._clamp(percentValue, 0, 100) * 2.55;
 266     },
 267
 268     /**
 269      * @param {number|string} rgbValue
 270      * @return {string}
 271      */
 272     _individualRGBValueToHexValue: function(rgbValue)
 273     {
 274         var floatValue = this._individualRGBValueToFloatValue(rgbValue);
 275         var hex = Math.round(floatValue).toString(16);
 276         if (hex.length === 1)
 277             hex = "0" + hex;
 278         return hex;
 279     },
 280
 281     /**
 282      * @param {Array.<string>} rgb
 283      * @return {string}
 284      */
 285     _rgbStringsToHex: function(rgb)
 286     {
 287         var r = this._individualRGBValueToHexValue(rgb[0]);
 288         var g = this._individualRGBValueToHexValue(rgb[1]);
 289         var b = this._individualRGBValueToHexValue(rgb[2]);
 290         return (r + g + b).toUpperCase();
 291     },
 292
 293     /**
 294      * @param {Array.<number>} rgb
 295      * @return {string}
 296      */
 297     _rgbToHex: function(rgb)
 298     {
 299         var r = this._individualRGBValueToHexValue(rgb[0]);
 300         var g = this._individualRGBValueToHexValue(rgb[1]);
 301         var b = this._individualRGBValueToHexValue(rgb[2]);
 302         return (r + g + b).toUpperCase();
 303     },
 304
 305     /**
 306      * @param {string} hex
 307      * @return {Array.<number>}
 308      */
 309     _hexToRGB: function(hex)
 310     {
 311         var r = parseInt(hex.substring(0,2), 16);
 312         var g = parseInt(hex.substring(2,4), 16);
 313         var b = parseInt(hex.substring(4,6), 16);
 314
 315         return [r, g, b];
 316     },
 317
 318     /**
 319      * @param {Array.<string|number>} rgb
 320      * @return {Array.<number>}
 321      */
 322     _rgbToHSL: function(rgb)
 323     {
 324         var r = this._individualRGBValueToFloatValue(rgb[0]) / 255;
 325         var g = this._individualRGBValueToFloatValue(rgb[1]) / 255;
 326         var b = this._individualRGBValueToFloatValue(rgb[2]) / 255;
 327         var max = Math.max(r, g, b);
 328         var min = Math.min(r, g, b);
 329         var diff = max - min;
 330         var add = max + min;
 331
 332         if (min === max)
 333             var h = 0;
 334         else if (r === max)
 335             var h = ((60 * (g - b) / diff) + 360) % 360;
 336         else if (g === max)
 337             var h = (60 * (b - r) / diff) + 120;
 338         else
 339             var h = (60 * (r - g) / diff) + 240;
 340
 341         var l = 0.5 * add;
 342
 343         if (l === 0)
 344             var s = 0;
 345         else if (l === 1)
 346             var s = 1;
 347         else if (l <= 0.5)
 348             var s = diff / add;
 349         else
 350             var s = diff / (2 - add);
 351
 352         h = Math.round(h);
 353         s = Math.round(s*100);
 354         l = Math.round(l*100);
 355
 356         return [h, s, l];
 357     },
 358
 359     /**
 360      * @param {Array.<number>} hsl
 361      * @return {Array.<number>}
 362      */
 363     _hslToRGB: function(hsl)
 364     {
 365         var h = parseFloat(hsl[0]) / 360;
 366         var s = parseFloat(hsl[1]) / 100;
 367         var l = parseFloat(hsl[2]) / 100;
 368
 369         if (s < 0)
 370             s = 0;
 371
 372         if (l <= 0.5)
 373             var q = l * (1 + s);
 374         else
 375             var q = l + s - (l * s);
 376
 377         var p = 2 * l - q;
 378
 379         var tr = h + (1 / 3);
 380         var tg = h;
 381         var tb = h - (1 / 3);
 382
 383         var r = Math.round(hueToRGB(p, q, tr) * 255);
 384         var g = Math.round(hueToRGB(p, q, tg) * 255);
 385         var b = Math.round(hueToRGB(p, q, tb) * 255);
 386         return [r, g, b];
 387
 388         function hueToRGB(p, q, h) {
 389             if (h < 0)
 390                 h += 1;
 391             else if (h > 1)
 392                 h -= 1;
 393
 394             if ((h * 6) < 1)
 395                 return p + (q - p) * h * 6;
 396             else if ((h * 2) < 1)
 397                 return q;
 398             else if ((h * 3) < 2)
 399                 return p + (q - p) * ((2 / 3) - h) * 6;
 400             else
 401                 return p;
 402         }
 403     },
 404
 405     /**
 406      * @param {Array.<number>} rgba
 407      * @return {Array.<number>}
 408      */
 409     _rgbaToHSLA: function(rgba, alpha)
 410     {
 411         var hsl = this._rgbToHSL(rgba)
 412         hsl.push(alpha);
 413         return hsl;
 414     },
 415
 416     /**
 417      * @param {Array.<number>} hsla
 418      * @param {number} alpha
 419      * @return {Array.<number>}
 420      */
 421     _hslaToRGBA: function(hsla, alpha)
 422     {
 423         var rgb = this._hslToRGB(hsla);
 424         rgb.push(alpha);
 425         return rgb;
 426     },
 427
 428     _parse: function()
 429     {
 430         // Special Values - Advanced but Must Be Parsed First - transparent
 431         var value = this.value.toLowerCase().replace(/%|\s+/g, "");
 432         if (value in WebInspector.Color.AdvancedNickNames) {
 433             this.format = "nickname";
 434             var set = WebInspector.Color.AdvancedNickNames[value];
 435             this.simple = false;
 436             this.rgba = set[0];
 437             this.hsla = set[1];
 438             this.nickname = set[2];
 439             this.alpha = set[0][3];
 440             return true;
 441         }
 442
 443         // Simple - #hex, rgb(), nickname, hsl()
 444         var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
 445         var match = this.value.match(simple);
 446         if (match) {
 447             this.simple = true;
 448
 449             if (match[1]) { // hex
 450                 var hex = match[1].toUpperCase();
 451                 if (hex.length === 3) {
 452                     this.format = "shorthex";
 453                     this.hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
 454                 } else {
 455                     this.format = "hex";
 456                     this.hex = hex;
 457                 }
 458             } else if (match[2]) { // rgb
 459                 this.format = "rgb";
 460                 var rgb = match[2].split(/\s*,\s*/);
 461                 this.rgb = rgb;
 462                 this.hex = this._rgbStringsToHex(rgb);
 463             } else if (match[3]) { // nickname
 464                 var nickname = match[3].toLowerCase();
 465                 if (nickname in WebInspector.Color.Nicknames) {
 466                     this.format = "nickname";
 467                     this.hex = WebInspector.Color.Nicknames[nickname];
 468                 } else // unknown name
 469                     return false;
 470             } else if (match[4]) { // hsl
 471                 this.format = "hsl";
 472                 var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
 473                 this.hsl = hsl;
 474                 this.rgb = this._hslToRGB(hsl);
 475                 this.hex = this._rgbToHex(this.rgb);
 476             }
 477
 478             // Fill in the values if this is a known hex color
 479             var hex = this.hex;
 480             if (hex && hex in WebInspector.Color.HexTable) {
 481                 var set = WebInspector.Color.HexTable[hex];
 482                 this.rgb = set[0];
 483                 this.hsl = set[1];
 484                 this.nickname = set[2];
 485             }
 486
 487             return true;
 488         }
 489
 490         // Advanced - rgba(), hsla()
 491         var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
 492         match = this.value.match(advanced);
 493         if (match) {
 494             this.simple = false;
 495             if (match[1]) { // rgba
 496                 this.format = "rgba";
 497                 this.rgba = match[1].split(/\s*,\s*/);
 498                 this.rgba[3] = this.alpha = this._clamp(this.rgba[3], 0, 1);
 499                 this.hsla = this._rgbaToHSLA(this.rgba, this.alpha);
 500             } else if (match[2]) { // hsla
 501                 this.format = "hsla";
 502                 this.hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
 503                 this.hsla[3] = this.alpha = this._clamp(this.hsla[3], 0, 1);
 504                 this.rgba = this._hslaToRGBA(this.hsla, this.alpha);
 505             }
 506
 507             return true;
 508         }
 509
 510         // Could not parse as a valid color
 511         return false;
 512     }
 513 }
 514
 515 // Simple Values: [rgb, hsl, nickname]
 516 WebInspector.Color.HexTable = {
 517     "000000": [[0, 0, 0], [0, 0, 0], "black"],
 518     "000080": [[0, 0, 128], [240, 100, 25], "navy"],
 519     "00008B": [[0, 0, 139], [240, 100, 27], "darkBlue"],
 520     "0000CD": [[0, 0, 205], [240, 100, 40], "mediumBlue"],
 521     "0000FF": [[0, 0, 255], [240, 100, 50], "blue"],
 522     "006400": [[0, 100, 0], [120, 100, 20], "darkGreen"],
 523     "008000": [[0, 128, 0], [120, 100, 25], "green"],
 524     "008080": [[0, 128, 128], [180, 100, 25], "teal"],
 525     "008B8B": [[0, 139, 139], [180, 100, 27], "darkCyan"],
 526     "00BFFF": [[0, 191, 255], [195, 100, 50], "deepSkyBlue"],
 527     "00CED1": [[0, 206, 209], [181, 100, 41], "darkTurquoise"],
 528     "00FA9A": [[0, 250, 154], [157, 100, 49], "mediumSpringGreen"],
 529     "00FF00": [[0, 255, 0], [120, 100, 50], "lime"],
 530     "00FF7F": [[0, 255, 127], [150, 100, 50], "springGreen"],
 531     "00FFFF": [[0, 255, 255], [180, 100, 50], "cyan"],
 532     "191970": [[25, 25, 112], [240, 64, 27], "midnightBlue"],
 533     "1E90FF": [[30, 144, 255], [210, 100, 56], "dodgerBlue"],
 534     "20B2AA": [[32, 178, 170], [177, 70, 41], "lightSeaGreen"],
 535     "228B22": [[34, 139, 34], [120, 61, 34], "forestGreen"],
 536     "2E8B57": [[46, 139, 87], [146, 50, 36], "seaGreen"],
 537     "2F4F4F": [[47, 79, 79], [180, 25, 25], "darkSlateGray"],
 538     "32CD32": [[50, 205, 50], [120, 61, 50], "limeGreen"],
 539     "3CB371": [[60, 179, 113], [147, 50, 47], "mediumSeaGreen"],
 540     "40E0D0": [[64, 224, 208], [174, 72, 56], "turquoise"],
 541     "4169E1": [[65, 105, 225], [225, 73, 57], "royalBlue"],
 542     "4682B4": [[70, 130, 180], [207, 44, 49], "steelBlue"],
 543     "483D8B": [[72, 61, 139], [248, 39, 39], "darkSlateBlue"],
 544     "48D1CC": [[72, 209, 204], [178, 60, 55], "mediumTurquoise"],
 545     "4B0082": [[75, 0, 130], [275, 100, 25], "indigo"],
 546     "556B2F": [[85, 107, 47], [82, 39, 30], "darkOliveGreen"],
 547     "5F9EA0": [[95, 158, 160], [182, 25, 50], "cadetBlue"],
 548     "6495ED": [[100, 149, 237], [219, 79, 66], "cornflowerBlue"],
 549     "66CDAA": [[102, 205, 170], [160, 51, 60], "mediumAquaMarine"],
 550     "696969": [[105, 105, 105], [0, 0, 41], "dimGray"],
 551     "6A5ACD": [[106, 90, 205], [248, 53, 58], "slateBlue"],
 552     "6B8E23": [[107, 142, 35], [80, 60, 35], "oliveDrab"],
 553     "708090": [[112, 128, 144], [210, 13, 50], "slateGray"],
 554     "778899": [[119, 136, 153], [210, 14, 53], "lightSlateGray"],
 555     "7B68EE": [[123, 104, 238], [249, 80, 67], "mediumSlateBlue"],
 556     "7CFC00": [[124, 252, 0], [90, 100, 49], "lawnGreen"],
 557     "7FFF00": [[127, 255, 0], [90, 100, 50], "chartreuse"],
 558     "7FFFD4": [[127, 255, 212], [160, 100, 75], "aquamarine"],
 559     "800000": [[128, 0, 0], [0, 100, 25], "maroon"],
 560     "800080": [[128, 0, 128], [300, 100, 25], "purple"],
 561     "808000": [[128, 128, 0], [60, 100, 25], "olive"],
 562     "808080": [[128, 128, 128], [0, 0, 50], "gray"],
 563     "87CEEB": [[135, 206, 235], [197, 71, 73], "skyBlue"],
 564     "87CEFA": [[135, 206, 250], [203, 92, 75], "lightSkyBlue"],
 565     "8A2BE2": [[138, 43, 226], [271, 76, 53], "blueViolet"],
 566     "8B0000": [[139, 0, 0], [0, 100, 27], "darkRed"],
 567     "8B008B": [[139, 0, 139], [300, 100, 27], "darkMagenta"],
 568     "8B4513": [[139, 69, 19], [25, 76, 31], "saddleBrown"],
 569     "8FBC8F": [[143, 188, 143], [120, 25, 65], "darkSeaGreen"],
 570     "90EE90": [[144, 238, 144], [120, 73, 75], "lightGreen"],
 571     "9370D8": [[147, 112, 219], [260, 60, 65], "mediumPurple"],
 572     "9400D3": [[148, 0, 211], [282, 100, 41], "darkViolet"],
 573     "98FB98": [[152, 251, 152], [120, 93, 79], "paleGreen"],
 574     "9932CC": [[153, 50, 204], [280, 61, 50], "darkOrchid"],
 575     "9ACD32": [[154, 205, 50], [80, 61, 50], "yellowGreen"],
 576     "A0522D": [[160, 82, 45], [19, 56, 40], "sienna"],
 577     "A52A2A": [[165, 42, 42], [0, 59, 41], "brown"],
 578     "A9A9A9": [[169, 169, 169], [0, 0, 66], "darkGray"],
 579     "ADD8E6": [[173, 216, 230], [195, 53, 79], "lightBlue"],
 580     "ADFF2F": [[173, 255, 47], [84, 100, 59], "greenYellow"],
 581     "AFEEEE": [[175, 238, 238], [180, 65, 81], "paleTurquoise"],
 582     "B0C4DE": [[176, 196, 222], [214, 41, 78], "lightSteelBlue"],
 583     "B0E0E6": [[176, 224, 230], [187, 52, 80], "powderBlue"],
 584     "B22222": [[178, 34, 34], [0, 68, 42], "fireBrick"],
 585     "B8860B": [[184, 134, 11], [43, 89, 38], "darkGoldenrod"],
 586     "BA55D3": [[186, 85, 211], [288, 59, 58], "mediumOrchid"],
 587     "BC8F8F": [[188, 143, 143], [0, 25, 65], "rosyBrown"],
 588     "BDB76B": [[189, 183, 107], [56, 38, 58], "darkKhaki"],
 589     "C0C0C0": [[192, 192, 192], [0, 0, 75], "silver"],
 590     "C71585": [[199, 21, 133], [322, 81, 43], "mediumVioletRed"],
 591     "CD5C5C": [[205, 92, 92], [0, 53, 58], "indianRed"],
 592     "CD853F": [[205, 133, 63], [30, 59, 53], "peru"],
 593     "D2691E": [[210, 105, 30], [25, 75, 47], "chocolate"],
 594     "D2B48C": [[210, 180, 140], [34, 44, 69], "tan"],
 595     "D3D3D3": [[211, 211, 211], [0, 0, 83], "lightGrey"],
 596     "D87093": [[219, 112, 147], [340, 60, 65], "paleVioletRed"],
 597     "D8BFD8": [[216, 191, 216], [300, 24, 80], "thistle"],
 598     "DA70D6": [[218, 112, 214], [302, 59, 65], "orchid"],
 599     "DAA520": [[218, 165, 32], [43, 74, 49], "goldenrod"],
 600     "DC143C": [[237, 20, 61], [35, 83, 58], "crimson"],
 601     "DCDCDC": [[220, 220, 220], [0, 0, 86], "gainsboro"],
 602     "DDA0DD": [[221, 160, 221], [300, 47, 75], "plum"],
 603     "DEB887": [[222, 184, 135], [34, 57, 70], "burlyWood"],
 604     "E0FFFF": [[224, 255, 255], [180, 100, 94], "lightCyan"],
 605     "E6E6FA": [[230, 230, 250], [240, 67, 94], "lavender"],
 606     "E9967A": [[233, 150, 122], [15, 72, 70], "darkSalmon"],
 607     "EE82EE": [[238, 130, 238], [300, 76, 72], "violet"],
 608     "EEE8AA": [[238, 232, 170], [55, 67, 80], "paleGoldenrod"],
 609     "F08080": [[240, 128, 128], [0, 79, 72], "lightCoral"],
 610     "F0E68C": [[240, 230, 140], [54, 77, 75], "khaki"],
 611     "F0F8FF": [[240, 248, 255], [208, 100, 97], "aliceBlue"],
 612     "F0FFF0": [[240, 255, 240], [120, 100, 97], "honeyDew"],
 613     "F0FFFF": [[240, 255, 255], [180, 100, 97], "azure"],
 614     "F4A460": [[244, 164, 96], [28, 87, 67], "sandyBrown"],
 615     "F5DEB3": [[245, 222, 179], [39, 77, 83], "wheat"],
 616     "F5F5DC": [[245, 245, 220], [60, 56, 91], "beige"],
 617     "F5F5F5": [[245, 245, 245], [0, 0, 96], "whiteSmoke"],
 618     "F5FFFA": [[245, 255, 250], [150, 100, 98], "mintCream"],
 619     "F8F8FF": [[248, 248, 255], [240, 100, 99], "ghostWhite"],
 620     "FA8072": [[250, 128, 114], [6, 93, 71], "salmon"],
 621     "FAEBD7": [[250, 235, 215], [34, 78, 91], "antiqueWhite"],
 622     "FAF0E6": [[250, 240, 230], [30, 67, 94], "linen"],
 623     "FAFAD2": [[250, 250, 210], [60, 80, 90], "lightGoldenrodYellow"],
 624     "FDF5E6": [[253, 245, 230], [39, 85, 95], "oldLace"],
 625     "FF0000": [[255, 0, 0], [0, 100, 50], "red"],
 626     "FF00FF": [[255, 0, 255], [300, 100, 50], "magenta"],
 627     "FF1493": [[255, 20, 147], [328, 100, 54], "deepPink"],
 628     "FF4500": [[255, 69, 0], [16, 100, 50], "orangeRed"],
 629     "FF6347": [[255, 99, 71], [9, 100, 64], "tomato"],
 630     "FF69B4": [[255, 105, 180], [330, 100, 71], "hotPink"],
 631     "FF7F50": [[255, 127, 80], [16, 100, 66], "coral"],
 632     "FF8C00": [[255, 140, 0], [33, 100, 50], "darkOrange"],
 633     "FFA07A": [[255, 160, 122], [17, 100, 74], "lightSalmon"],
 634     "FFA500": [[255, 165, 0], [39, 100, 50], "orange"],
 635     "FFB6C1": [[255, 182, 193], [351, 100, 86], "lightPink"],
 636     "FFC0CB": [[255, 192, 203], [350, 100, 88], "pink"],
 637     "FFD700": [[255, 215, 0], [51, 100, 50], "gold"],
 638     "FFDAB9": [[255, 218, 185], [28, 100, 86], "peachPuff"],
 639     "FFDEAD": [[255, 222, 173], [36, 100, 84], "navajoWhite"],
 640     "FFE4B5": [[255, 228, 181], [38, 100, 85], "moccasin"],
 641     "FFE4C4": [[255, 228, 196], [33, 100, 88], "bisque"],
 642     "FFE4E1": [[255, 228, 225], [6, 100, 94], "mistyRose"],
 643     "FFEBCD": [[255, 235, 205], [36, 100, 90], "blanchedAlmond"],
 644     "FFEFD5": [[255, 239, 213], [37, 100, 92], "papayaWhip"],
 645     "FFF0F5": [[255, 240, 245], [340, 100, 97], "lavenderBlush"],
 646     "FFF5EE": [[255, 245, 238], [25, 100, 97], "seaShell"],
 647     "FFF8DC": [[255, 248, 220], [48, 100, 93], "cornsilk"],
 648     "FFFACD": [[255, 250, 205], [54, 100, 90], "lemonChiffon"],
 649     "FFFAF0": [[255, 250, 240], [40, 100, 97], "floralWhite"],
 650     "FFFAFA": [[255, 250, 250], [0, 100, 99], "snow"],
 651     "FFFF00": [[255, 255, 0], [60, 100, 50], "yellow"],
 652     "FFFFE0": [[255, 255, 224], [60, 100, 94], "lightYellow"],
 653     "FFFFF0": [[255, 255, 240], [60, 100, 97], "ivory"],
 654     "FFFFFF": [[255, 255, 255], [0, 100, 100], "white"]
 655 };
 656
 657 // Simple Values
 658 WebInspector.Color.Nicknames = {
 659     "aliceblue": "F0F8FF",
 660     "antiquewhite": "FAEBD7",
 661     "aqua": "00FFFF",
 662     "aquamarine": "7FFFD4",
 663     "azure": "F0FFFF",
 664     "beige": "F5F5DC",
 665     "bisque": "FFE4C4",
 666     "black": "000000",
 667     "blanchedalmond": "FFEBCD",
 668     "blue": "0000FF",
 669     "blueviolet": "8A2BE2",
 670     "brown": "A52A2A",
 671     "burlywood": "DEB887",
 672     "cadetblue": "5F9EA0",
 673     "chartreuse": "7FFF00",
 674     "chocolate": "D2691E",
 675     "coral": "FF7F50",
 676     "cornflowerblue": "6495ED",
 677     "cornsilk": "FFF8DC",
 678     "crimson": "DC143C",
 679     "cyan": "00FFFF",
 680     "darkblue": "00008B",
 681     "darkcyan": "008B8B",
 682     "darkgoldenrod": "B8860B",
 683     "darkgray": "A9A9A9",
 684     "darkgreen": "006400",
 685     "darkkhaki": "BDB76B",
 686     "darkmagenta": "8B008B",
 687     "darkolivegreen": "556B2F",
 688     "darkorange": "FF8C00",
 689     "darkorchid": "9932CC",
 690     "darkred": "8B0000",
 691     "darksalmon": "E9967A",
 692     "darkseagreen": "8FBC8F",
 693     "darkslateblue": "483D8B",
 694     "darkslategray": "2F4F4F",
 695     "darkturquoise": "00CED1",
 696     "darkviolet": "9400D3",
 697     "deeppink": "FF1493",
 698     "deepskyblue": "00BFFF",
 699     "dimgray": "696969",
 700     "dodgerblue": "1E90FF",
 701     "firebrick": "B22222",
 702     "floralwhite": "FFFAF0",
 703     "forestgreen": "228B22",
 704     "fuchsia": "FF00FF",
 705     "gainsboro": "DCDCDC",
 706     "ghostwhite": "F8F8FF",
 707     "gold": "FFD700",
 708     "goldenrod": "DAA520",
 709     "gray": "808080",
 710     "green": "008000",
 711     "greenyellow": "ADFF2F",
 712     "honeydew": "F0FFF0",
 713     "hotpink": "FF69B4",
 714     "indianred": "CD5C5C",
 715     "indigo": "4B0082",
 716     "ivory": "FFFFF0",
 717     "khaki": "F0E68C",
 718     "lavender": "E6E6FA",
 719     "lavenderblush": "FFF0F5",
 720     "lawngreen": "7CFC00",
 721     "lemonchiffon": "FFFACD",
 722     "lightblue": "ADD8E6",
 723     "lightcoral": "F08080",
 724     "lightcyan": "E0FFFF",
 725     "lightgoldenrodyellow": "FAFAD2",
 726     "lightgreen": "90EE90",
 727     "lightgrey": "D3D3D3",
 728     "lightpink": "FFB6C1",
 729     "lightsalmon": "FFA07A",
 730     "lightseagreen": "20B2AA",
 731     "lightskyblue": "87CEFA",
 732     "lightslategray": "778899",
 733     "lightsteelblue": "B0C4DE",
 734     "lightyellow": "FFFFE0",
 735     "lime": "00FF00",
 736     "limegreen": "32CD32",
 737     "linen": "FAF0E6",
 738     "magenta": "FF00FF",
 739     "maroon": "800000",
 740     "mediumaquamarine": "66CDAA",
 741     "mediumblue": "0000CD",
 742     "mediumorchid": "BA55D3",
 743     "mediumpurple": "9370DB",
 744     "mediumseagreen": "3CB371",
 745     "mediumslateblue": "7B68EE",
 746     "mediumspringgreen": "00FA9A",
 747     "mediumturquoise": "48D1CC",
 748     "mediumvioletred": "C71585",
 749     "midnightblue": "191970",
 750     "mintcream": "F5FFFA",
 751     "mistyrose": "FFE4E1",
 752     "moccasin": "FFE4B5",
 753     "navajowhite": "FFDEAD",
 754     "navy": "000080",
 755     "oldlace": "FDF5E6",
 756     "olive": "808000",
 757     "olivedrab": "6B8E23",
 758     "orange": "FFA500",
 759     "orangered": "FF4500",
 760     "orchid": "DA70D6",
 761     "palegoldenrod": "EEE8AA",
 762     "palegreen": "98FB98",
 763     "paleturquoise": "AFEEEE",
 764     "palevioletred": "DB7093",
 765     "papayawhip": "FFEFD5",
 766     "peachpuff": "FFDAB9",
 767     "peru": "CD853F",
 768     "pink": "FFC0CB",
 769     "plum": "DDA0DD",
 770     "powderblue": "B0E0E6",
 771     "purple": "800080",
 772     "red": "FF0000",
 773     "rosybrown": "BC8F8F",
 774     "royalblue": "4169E1",
 775     "saddlebrown": "8B4513",
 776     "salmon": "FA8072",
 777     "sandybrown": "F4A460",
 778     "seagreen": "2E8B57",
 779     "seashell": "FFF5EE",
 780     "sienna": "A0522D",
 781     "silver": "C0C0C0",
 782     "skyblue": "87CEEB",
 783     "slateblue": "6A5ACD",
 784     "slategray": "708090",
 785     "snow": "FFFAFA",
 786     "springgreen": "00FF7F",
 787     "steelblue": "4682B4",
 788     "tan": "D2B48C",
 789     "teal": "008080",
 790     "thistle": "D8BFD8",
 791     "tomato": "FF6347",
 792     "turquoise": "40E0D0",
 793     "violet": "EE82EE",
 794     "wheat": "F5DEB3",
 795     "white": "FFFFFF",
 796     "whitesmoke": "F5F5F5",
 797     "yellow": "FFFF00",
 798     "yellowgreen": "9ACD32"
 799 };
 800
 801 // Advanced Values [rgba, hsla, nickname]
 802 WebInspector.Color.AdvancedNickNames = {
 803     "transparent": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
 804     "rgba(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
 805     "hsla(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
 806 };
 807
 808 WebInspector.Color.PageHighlight = {
 809     Content: WebInspector.Color.fromRGBA(111, 168, 220, .66),
 810     ContentLight: WebInspector.Color.fromRGBA(111, 168, 220, .5),
 811     ContentOutline: WebInspector.Color.fromRGBA(9, 83, 148),
 812     Padding: WebInspector.Color.fromRGBA(147, 196, 125, .55),
 813     PaddingLight: WebInspector.Color.fromRGBA(147, 196, 125, .4),
 814     Border: WebInspector.Color.fromRGBA(255, 229, 153, .66),
 815     BorderLight: WebInspector.Color.fromRGBA(255, 229, 153, .5),
 816     Margin: WebInspector.Color.fromRGBA(246, 178, 107, .66),
 817     MarginLight: WebInspector.Color.fromRGBA(246, 178, 107, .5)
 818 }
 819
 820 WebInspector.Color.Format = {
 821     Original: "original",
 822     Nickname: "nickname",
 823     HEX: "hex",
 824     ShortHEX: "shorthex",
 825     RGB: "rgb",
 826     RGBA: "rgba",
 827     HSL: "hsl",
 828     HSLA: "hsla"
 829 }