1 /* Plugin for jQuery for working with colors.
5 * Inspiration from jQuery color animation plugin by John Resig.
7 * Released under the MIT license by Ole Laursen, October 2009.
11 * $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
12 * var c = $.color.extract($("#mydiv"), 'background-color');
13 * console.log(c.r, c.g, c.b, c.a);
14 * $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
16 * Note that .scale() and .add() return the same modified object
17 * instead of making a new one.
19 * V. 1.1: Fix error handling so e.g. parsing an empty string does
20 * produce a color rather than just crashing.
26 // construct color object with some convenient chainable helpers
27 $.color.make = function (r, g, b, a) {
32 o.a = a != null ? a : 1;
34 o.add = function (c, d) {
35 for (var i = 0; i < c.length; ++i)
40 o.scale = function (c, f) {
41 for (var i = 0; i < c.length; ++i)
46 o.toString = function () {
48 return "rgb("+[o.r, o.g, o.b].join(",")+")";
50 return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")";
54 o.normalize = function () {
55 function clamp(min, value, max) {
56 return value < min ? min: (value > max ? max: value);
59 o.r = clamp(0, parseInt(o.r), 255);
60 o.g = clamp(0, parseInt(o.g), 255);
61 o.b = clamp(0, parseInt(o.b), 255);
62 o.a = clamp(0, o.a, 1);
66 o.clone = function () {
67 return $.color.make(o.r, o.b, o.g, o.a);
73 // extract CSS color property from element, going up in the DOM
74 // if it's "transparent"
75 $.color.extract = function (elem, css) {
79 c = elem.css(css).toLowerCase();
80 // keep going until we find an element that has color, or
81 // we hit the body or root (have no parent)
82 if (c != '' && c != 'transparent')
85 } while (elem.length && !$.nodeName(elem.get(0), "body"));
87 // catch Safari's way of signalling transparent
88 if (c == "rgba(0, 0, 0, 0)")
91 return $.color.parse(c);
94 // parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
95 // returns color object, if parsing failed, you get black (0, 0,
97 $.color.parse = function (str) {
98 var res, m = $.color.make;
100 // Look for rgb(num,num,num)
101 if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))
102 return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10));
104 // Look for rgba(num,num,num,num)
105 if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
106 return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4]));
108 // Look for rgb(num%,num%,num%)
109 if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))
110 return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55);
112 // Look for rgba(num%,num%,num%,num)
113 if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))
114 return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4]));
117 if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))
118 return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16));
121 if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))
122 return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16));
124 // Otherwise, we're most likely dealing with a named color
125 var name = $.trim(str).toLowerCase();
126 if (name == "transparent")
127 return m(255, 255, 255, 0);
130 res = lookupColors[name] || [0, 0, 0];
131 return m(res[0], res[1], res[2]);
144 darkcyan:[0,139,139],
145 darkgrey:[169,169,169],
147 darkkhaki:[189,183,107],
148 darkmagenta:[139,0,139],
149 darkolivegreen:[85,107,47],
150 darkorange:[255,140,0],
151 darkorchid:[153,50,204],
153 darksalmon:[233,150,122],
154 darkviolet:[148,0,211],
160 lightblue:[173,216,230],
161 lightcyan:[224,255,255],
162 lightgreen:[144,238,144],
163 lightgrey:[211,211,211],
164 lightpink:[255,182,193],
165 lightyellow:[255,255,224],
176 silver:[192,192,192],