2 * jQuery Color Utilities
4 * Released under the MIT and GPL licenses.
6 * Mostly based on other plugins and functions (linted and optimized a little).
7 * Sources cited inline.
11 * @class jQuery.colorUtil
17 * Parse CSS color strings looking for color tuples
19 * Based on highlightFade by Blair Mitchelmore
20 * <http://jquery.offput.ca/highlightFade/>
22 * @param {Array|string} color
25 getRGB: function ( color
) {
29 // Check if we're already dealing with an array of colors
30 if ( color
&& $.isArray( color
) && color
.length
=== 3 ) {
34 // Look for rgb(num,num,num)
35 if (result
= /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color
)) {
36 return [parseInt(result
[1],10), parseInt(result
[2],10), parseInt(result
[3],10)];
39 // Look for rgb(num%,num%,num%)
40 if (result
= /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color
)) {
41 return [parseFloat(result
[1],10) * 2.55, parseFloat(result
[2],10) * 2.55, parseFloat(result
[3]) * 2.55];
45 if (result
= /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color
)) {
46 return [parseInt(result
[1],16), parseInt(result
[2],16), parseInt(result
[3],16)];
50 if (result
= /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color
)) {
51 return [parseInt(result
[1] + result
[1],16), parseInt(result
[2] + result
[2],16), parseInt(result
[3] + result
[3],16)];
54 // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
55 if (result
= /rgba\(0, 0, 0, 0\)/.exec(color
)) {
56 return $.colorUtil
.colors
.transparent
;
59 // Otherwise, we're most likely dealing with a named color
60 return $.colorUtil
.colors
[$.trim(color
).toLowerCase()];
66 * Based on Interface by Stefan Petre
67 * <http://interface.eyecon.ro/>
80 darkcyan
: [0,139,139],
81 darkgrey
: [169,169,169],
83 darkkhaki
: [189,183,107],
84 darkmagenta
: [139,0,139],
85 darkolivegreen
: [85,107,47],
86 darkorange
: [255,140,0],
87 darkorchid
: [153,50,204],
89 darksalmon
: [233,150,122],
90 darkviolet
: [148,0,211],
96 lightblue
: [173,216,230],
97 lightcyan
: [224,255,255],
98 lightgreen
: [144,238,144],
99 lightgrey
: [211,211,211],
100 lightpink
: [255,182,193],
101 lightyellow
: [255,255,224],
103 magenta
: [255,0,255],
112 silver
: [192,192,192],
113 white
: [255,255,255],
115 transparent
: [255,255,255]
119 * Convert an RGB color value to HSL.
121 * Conversion formula based on
122 * <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
124 * Adapted from <https://en.wikipedia.org/wiki/HSL_color_space>.
126 * Assumes `r`, `g`, and `b` are contained in the set `[0, 255]` and
127 * returns `h`, `s`, and `l` in the set `[0, 1]`.
129 * @param {number} r The red color value
130 * @param {number} g The green color value
131 * @param {number} b The blue color value
132 * @return {number[]} The HSL representation
134 rgbToHsl: function ( r
, g
, b
) {
140 max
= Math
.max( r
, g
, b
),
141 min
= Math
.min( r
, g
, b
),
151 s
= l
> 0.5 ? d
/ (2 - max
- min
) : d
/ (max
+ min
);
154 h
= (g
- b
) / d
+ (g
< b
? 6 : 0);
170 * Convert an HSL color value to RGB.
172 * Conversion formula based on
173 * <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
175 * Adapted from <https://en.wikipedia.org/wiki/HSL_color_space>.
177 * Assumes `h`, `s`, and `l` are contained in the set `[0, 1]` and
178 * returns `r`, `g`, and `b` in the set `[0, 255]`.
180 * @param {number} h The hue
181 * @param {number} s The saturation
182 * @param {number} l The lightness
183 * @return {number[]} The RGB representation
185 hslToRgb: function ( h
, s
, l
) {
186 var r
, g
, b
, hue2rgb
, q
, p
;
189 r
= g
= b
= l
; // achromatic
191 hue2rgb = function ( p
, q
, t
) {
199 return p
+ (q
- p
) * 6 * t
;
205 return p
+ (q
- p
) * (2 / 3 - t
) * 6;
210 q
= l
< 0.5 ? l
* (1 + s
) : l
+ s
- l
* s
;
212 r
= hue2rgb( p
, q
, h
+ 1 / 3 );
213 g
= hue2rgb( p
, q
, h
);
214 b
= hue2rgb( p
, q
, h
- 1 / 3 );
217 return [r
* 255, g
* 255, b
* 255];
221 * Get a brighter or darker rgb() value string.
225 * $.colorUtil.getColorBrightness( 'red', +0.1 );
226 * // > "rgb(255,50,50)"
227 * $.colorUtil.getColorBrightness( 'rgb(200,50,50)', -0.2 );
228 * // > "rgb(118,29,29)"
230 * @param {Mixed} currentColor Current value in css
231 * @param {number} mod Wanted brightness modification between -1 and 1
232 * @return {string} Like `'rgb(r,g,b)'`
234 getColorBrightness: function ( currentColor
, mod
) {
235 var rgbArr
= $.colorUtil
.getRGB( currentColor
),
236 hslArr
= $.colorUtil
.rgbToHsl(rgbArr
[0], rgbArr
[1], rgbArr
[2] );
237 rgbArr
= $.colorUtil
.hslToRgb(hslArr
[0], hslArr
[1], hslArr
[2] + mod
);
240 [parseInt( rgbArr
[0], 10), parseInt( rgbArr
[1], 10 ), parseInt( rgbArr
[2], 10 )].join( ',' ) +