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
) {
28 // Check if we're already dealing with an array of colors
29 if ( color
&& Array
.isArray( color
) && color
.length
=== 3 ) {
32 if ( typeof color
!== 'string' ) {
36 // Look for rgb(num,num,num)
37 // eslint-disable-next-line no-cond-assign
38 if ( result
= /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec( color
) ) {
40 parseInt( result
[ 1 ], 10 ),
41 parseInt( result
[ 2 ], 10 ),
42 parseInt( result
[ 3 ], 10 )
46 // Look for rgb(num%,num%,num%)
47 // eslint-disable-next-line no-cond-assign
48 if ( result
= /rgb\(\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*,\s*([0-9]+(?:\.[0-9]+)?)%\s*\)/.exec( color
) ) {
50 parseFloat( result
[ 1 ] ) * 2.55,
51 parseFloat( result
[ 2 ] ) * 2.55,
52 parseFloat( result
[ 3 ] ) * 2.55
57 // eslint-disable-next-line no-cond-assign
58 if ( result
= /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec( color
) ) {
60 parseInt( result
[ 1 ], 16 ),
61 parseInt( result
[ 2 ], 16 ),
62 parseInt( result
[ 3 ], 16 )
67 // eslint-disable-next-line no-cond-assign
68 if ( result
= /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec( color
) ) {
70 parseInt( result
[ 1 ] + result
[ 1 ], 16 ),
71 parseInt( result
[ 2 ] + result
[ 2 ], 16 ),
72 parseInt( result
[ 3 ] + result
[ 3 ], 16 )
76 // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
77 // eslint-disable-next-line no-cond-assign
78 if ( result
= /rgba\(0, 0, 0, 0\)/.exec( color
) ) {
79 return $.colorUtil
.colors
.transparent
;
82 // Otherwise, we're most likely dealing with a named color
83 return $.colorUtil
.colors
[ color
.trim().toLowerCase() ];
89 * Based on Interface by Stefan Petre
90 * <http://interface.eyecon.ro/>
95 aqua
: [ 0, 255, 255 ],
96 azure
: [ 240, 255, 255 ],
97 beige
: [ 245, 245, 220 ],
100 brown
: [ 165, 42, 42 ],
101 cyan
: [ 0, 255, 255 ],
102 darkblue
: [ 0, 0, 139 ],
103 darkcyan
: [ 0, 139, 139 ],
104 darkgrey
: [ 169, 169, 169 ],
105 darkgreen
: [ 0, 100, 0 ],
106 darkkhaki
: [ 189, 183, 107 ],
107 darkmagenta
: [ 139, 0, 139 ],
108 darkolivegreen
: [ 85, 107, 47 ],
109 darkorange
: [ 255, 140, 0 ],
110 darkorchid
: [ 153, 50, 204 ],
111 darkred
: [ 139, 0, 0 ],
112 darksalmon
: [ 233, 150, 122 ],
113 darkviolet
: [ 148, 0, 211 ],
114 fuchsia
: [ 255, 0, 255 ],
115 gold
: [ 255, 215, 0 ],
116 green
: [ 0, 128, 0 ],
117 indigo
: [ 75, 0, 130 ],
118 khaki
: [ 240, 230, 140 ],
119 lightblue
: [ 173, 216, 230 ],
120 lightcyan
: [ 224, 255, 255 ],
121 lightgreen
: [ 144, 238, 144 ],
122 lightgrey
: [ 211, 211, 211 ],
123 lightpink
: [ 255, 182, 193 ],
124 lightyellow
: [ 255, 255, 224 ],
126 magenta
: [ 255, 0, 255 ],
127 maroon
: [ 128, 0, 0 ],
129 olive
: [ 128, 128, 0 ],
130 orange
: [ 255, 165, 0 ],
131 pink
: [ 255, 192, 203 ],
132 purple
: [ 128, 0, 128 ],
133 violet
: [ 128, 0, 128 ],
135 silver
: [ 192, 192, 192 ],
136 white
: [ 255, 255, 255 ],
137 yellow
: [ 255, 255, 0 ],
138 transparent
: [ 255, 255, 255 ]
142 * Convert an RGB color value to HSL.
144 * Conversion formula based on
145 * <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
147 * Adapted from <https://en.wikipedia.org/wiki/HSL_color_space>.
149 * Assumes `r`, `g`, and `b` are contained in the set `[0, 255]` and
150 * returns `h`, `s`, and `l` in the set `[0, 1]`.
152 * @param {number} r The red color value
153 * @param {number} g The green color value
154 * @param {number} b The blue color value
155 * @return {number[]} The HSL representation
157 rgbToHsl: function ( r
, g
, b
) {
158 var d
, h
, s
, l
, min
, max
;
164 max
= Math
.max( r
, g
, b
);
165 min
= Math
.min( r
, g
, b
);
166 l
= ( max
+ min
) / 2;
173 s
= l
> 0.5 ? d
/ ( 2 - max
- min
) : d
/ ( max
+ min
);
176 h
= ( g
- b
) / d
+ ( g
< b
? 6 : 0 );
179 h
= ( b
- r
) / d
+ 2;
182 h
= ( r
- g
) / d
+ 4;
192 * Convert an HSL color value to RGB.
194 * Conversion formula based on
195 * <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
197 * Adapted from <https://en.wikipedia.org/wiki/HSL_color_space>.
199 * Assumes `h`, `s`, and `l` are contained in the set `[0, 1]` and
200 * returns `r`, `g`, and `b` in the set `[0, 255]`.
202 * @param {number} h The hue
203 * @param {number} s The saturation
204 * @param {number} l The lightness
205 * @return {number[]} The RGB representation
207 hslToRgb: function ( h
, s
, l
) {
208 var r
, g
, b
, hue2rgb
, q
, p
;
211 r
= g
= b
= l
; // achromatic
213 hue2rgb = function ( p
, q
, t
) {
221 return p
+ ( q
- p
) * 6 * t
;
227 return p
+ ( q
- p
) * ( 2 / 3 - t
) * 6;
232 q
= l
< 0.5 ? l
* ( 1 + s
) : l
+ s
- l
* s
;
234 r
= hue2rgb( p
, q
, h
+ 1 / 3 );
235 g
= hue2rgb( p
, q
, h
);
236 b
= hue2rgb( p
, q
, h
- 1 / 3 );
239 return [ r
* 255, g
* 255, b
* 255 ];
243 * Get a brighter or darker rgb() value string.
247 * $.colorUtil.getColorBrightness( 'red', +0.1 );
248 * // > "rgb(255,50,50)"
249 * $.colorUtil.getColorBrightness( 'rgb(200,50,50)', -0.2 );
250 * // > "rgb(118,29,29)"
252 * @param {Mixed} currentColor Current value in css
253 * @param {number} mod Wanted brightness modification between -1 and 1
254 * @return {string} Like `'rgb(r,g,b)'`
256 getColorBrightness: function ( currentColor
, mod
) {
257 var rgbArr
= $.colorUtil
.getRGB( currentColor
),
258 hslArr
= $.colorUtil
.rgbToHsl( rgbArr
[ 0 ], rgbArr
[ 1 ], rgbArr
[ 2 ] );
259 rgbArr
= $.colorUtil
.hslToRgb( hslArr
[ 0 ], hslArr
[ 1 ], hslArr
[ 2 ] + mod
);
262 [ parseInt( rgbArr
[ 0 ], 10 ), parseInt( rgbArr
[ 1 ], 10 ), parseInt( rgbArr
[ 2 ], 10 ) ].join( ',' ) +