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
) ) {
37 parseInt( result
[ 1 ], 10 ),
38 parseInt( result
[ 2 ], 10 ),
39 parseInt( result
[ 3 ], 10 )
43 // Look for rgb(num%,num%,num%)
44 if ( result
= /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec( color
) ) {
46 parseFloat( result
[ 1 ] ) * 2.55,
47 parseFloat( result
[ 2 ] ) * 2.55,
48 parseFloat( result
[ 3 ] ) * 2.55
53 if ( result
= /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec( color
) ) {
55 parseInt( result
[ 1 ], 16 ),
56 parseInt( result
[ 2 ], 16 ),
57 parseInt( result
[ 3 ], 16 )
62 if ( result
= /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec( color
) ) {
64 parseInt( result
[ 1 ] + result
[ 1 ], 16 ),
65 parseInt( result
[ 2 ] + result
[ 2 ], 16 ),
66 parseInt( result
[ 3 ] + result
[ 3 ], 16 )
70 // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
71 if ( result
= /rgba\(0, 0, 0, 0\)/.exec( color
) ) {
72 return $.colorUtil
.colors
.transparent
;
75 // Otherwise, we're most likely dealing with a named color
76 return $.colorUtil
.colors
[ $.trim( color
).toLowerCase() ];
82 * Based on Interface by Stefan Petre
83 * <http://interface.eyecon.ro/>
88 aqua
: [ 0, 255, 255 ],
89 azure
: [ 240, 255, 255 ],
90 beige
: [ 245, 245, 220 ],
93 brown
: [ 165, 42, 42 ],
94 cyan
: [ 0, 255, 255 ],
95 darkblue
: [ 0, 0, 139 ],
96 darkcyan
: [ 0, 139, 139 ],
97 darkgrey
: [ 169, 169, 169 ],
98 darkgreen
: [ 0, 100, 0 ],
99 darkkhaki
: [ 189, 183, 107 ],
100 darkmagenta
: [ 139, 0, 139 ],
101 darkolivegreen
: [ 85, 107, 47 ],
102 darkorange
: [ 255, 140, 0 ],
103 darkorchid
: [ 153, 50, 204 ],
104 darkred
: [ 139, 0, 0 ],
105 darksalmon
: [ 233, 150, 122 ],
106 darkviolet
: [ 148, 0, 211 ],
107 fuchsia
: [ 255, 0, 255 ],
108 gold
: [ 255, 215, 0 ],
109 green
: [ 0, 128, 0 ],
110 indigo
: [ 75, 0, 130 ],
111 khaki
: [ 240, 230, 140 ],
112 lightblue
: [ 173, 216, 230 ],
113 lightcyan
: [ 224, 255, 255 ],
114 lightgreen
: [ 144, 238, 144 ],
115 lightgrey
: [ 211, 211, 211 ],
116 lightpink
: [ 255, 182, 193 ],
117 lightyellow
: [ 255, 255, 224 ],
119 magenta
: [ 255, 0, 255 ],
120 maroon
: [ 128, 0, 0 ],
122 olive
: [ 128, 128, 0 ],
123 orange
: [ 255, 165, 0 ],
124 pink
: [ 255, 192, 203 ],
125 purple
: [ 128, 0, 128 ],
126 violet
: [ 128, 0, 128 ],
128 silver
: [ 192, 192, 192 ],
129 white
: [ 255, 255, 255 ],
130 yellow
: [ 255, 255, 0 ],
131 transparent
: [ 255, 255, 255 ]
135 * Convert an RGB color value to HSL.
137 * Conversion formula based on
138 * <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
140 * Adapted from <https://en.wikipedia.org/wiki/HSL_color_space>.
142 * Assumes `r`, `g`, and `b` are contained in the set `[0, 255]` and
143 * returns `h`, `s`, and `l` in the set `[0, 1]`.
145 * @param {number} r The red color value
146 * @param {number} g The green color value
147 * @param {number} b The blue color value
148 * @return {number[]} The HSL representation
150 rgbToHsl: function ( r
, g
, b
) {
156 max
= Math
.max( r
, g
, b
),
157 min
= Math
.min( r
, g
, b
),
160 l
= ( max
+ min
) / 2;
167 s
= l
> 0.5 ? d
/ ( 2 - max
- min
) : d
/ ( max
+ min
);
170 h
= ( g
- b
) / d
+ ( g
< b
? 6 : 0 );
173 h
= ( b
- r
) / d
+ 2;
176 h
= ( r
- g
) / d
+ 4;
186 * Convert an HSL color value to RGB.
188 * Conversion formula based on
189 * <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
191 * Adapted from <https://en.wikipedia.org/wiki/HSL_color_space>.
193 * Assumes `h`, `s`, and `l` are contained in the set `[0, 1]` and
194 * returns `r`, `g`, and `b` in the set `[0, 255]`.
196 * @param {number} h The hue
197 * @param {number} s The saturation
198 * @param {number} l The lightness
199 * @return {number[]} The RGB representation
201 hslToRgb: function ( h
, s
, l
) {
202 var r
, g
, b
, hue2rgb
, q
, p
;
205 r
= g
= b
= l
; // achromatic
207 hue2rgb = function ( p
, q
, t
) {
215 return p
+ ( q
- p
) * 6 * t
;
221 return p
+ ( q
- p
) * ( 2 / 3 - t
) * 6;
226 q
= l
< 0.5 ? l
* ( 1 + s
) : l
+ s
- l
* s
;
228 r
= hue2rgb( p
, q
, h
+ 1 / 3 );
229 g
= hue2rgb( p
, q
, h
);
230 b
= hue2rgb( p
, q
, h
- 1 / 3 );
233 return [ r
* 255, g
* 255, b
* 255 ];
237 * Get a brighter or darker rgb() value string.
241 * $.colorUtil.getColorBrightness( 'red', +0.1 );
242 * // > "rgb(255,50,50)"
243 * $.colorUtil.getColorBrightness( 'rgb(200,50,50)', -0.2 );
244 * // > "rgb(118,29,29)"
246 * @param {Mixed} currentColor Current value in css
247 * @param {number} mod Wanted brightness modification between -1 and 1
248 * @return {string} Like `'rgb(r,g,b)'`
250 getColorBrightness: function ( currentColor
, mod
) {
251 var rgbArr
= $.colorUtil
.getRGB( currentColor
),
252 hslArr
= $.colorUtil
.rgbToHsl( rgbArr
[ 0 ], rgbArr
[ 1 ], rgbArr
[ 2 ] );
253 rgbArr
= $.colorUtil
.hslToRgb( hslArr
[ 0 ], hslArr
[ 1 ], hslArr
[ 2 ] + mod
);
256 [ parseInt( rgbArr
[ 0 ], 10 ), parseInt( rgbArr
[ 1 ], 10 ), parseInt( rgbArr
[ 2 ], 10 ) ].join( ',' ) +