5 Functions for Color handling and processing.
7 http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
9 The author of this program, Safalra (Stephen Morley), irrevocably releases all
10 rights to this program, with the intention of it becoming part of the public
11 domain. Because this program is released into the public domain, it comes with
12 no warranty either expressed or implied, to the extent permitted by law.
14 For more free and public domain JavaScript code by the same author, visit:
15 http://www.safalra.com/web-design/javascript/
21 * @class Roo.lib.Color
22 * An abstract Color implementation. Concrete Color implementations should use
23 * an instance of this function as their prototype, and implement the getRGB and
24 * getHSL functions. getRGB should return an object representing the RGB
25 * components of this Color, with the red, green, and blue components in the
26 * range [0,255] and the alpha component in the range [0,100]. getHSL should
27 * return an object representing the HSL components of this Color, with the hue
28 * component in the range [0,360), the saturation and lightness components in
29 * the range [0,100], and the alpha component in the range [0,1].
31 Roo.lib.Color = function(){
34 * @returns an object representing the RGBA components of this Color. The red,
35 * green, and blue components are converted to integers in the range [0,255].
36 * The alpha is a value in the range [0,1].
38 this.getIntegerRGB = function(){
40 // get the RGB components of this Color
41 var rgb = this.getRGB();
43 // return the integer components
45 'r' : Math.round(rgb.r),
46 'g' : Math.round(rgb.g),
47 'b' : Math.round(rgb.b),
54 * @returns an object representing the RGBA components of this Color. The red,
55 * green, and blue components are converted to numbers in the range [0,100].
56 * The alpha is a value in the range [0,1].
58 this.getPercentageRGB = function(){
60 // get the RGB components of this Color
61 var rgb = this.getRGB();
63 // return the percentage components
65 'r' : 100 * rgb.r / 255,
66 'g' : 100 * rgb.g / 255,
67 'b' : 100 * rgb.b / 255,
74 * @returns a string representing this Color as a CSS hexadecimal RGB Color
75 * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
76 * are two-digit hexadecimal numbers.
78 this.getCSSHexadecimalRGB = function(){
80 // get the integer RGB components
81 var rgb = this.getIntegerRGB();
83 // determine the hexadecimal equivalents
84 var r16 = rgb.r.toString(16);
85 var g16 = rgb.g.toString(16);
86 var b16 = rgb.b.toString(16);
88 // return the CSS RGB Color value
90 + (r16.length == 2 ? r16 : '0' + r16)
91 + (g16.length == 2 ? g16 : '0' + g16)
92 + (b16.length == 2 ? b16 : '0' + b16);
97 * @returns a string representing this Color as a CSS integer RGB Color
98 * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
99 * are integers in the range [0,255].
101 this.getCSSIntegerRGB = function(){
103 // get the integer RGB components
104 var rgb = this.getIntegerRGB();
106 // return the CSS RGB Color value
107 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
112 * @returns Returns a string representing this Color as a CSS integer RGBA Color
113 * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
114 * b are integers in the range [0,255] and a is in the range [0,1].
116 this.getCSSIntegerRGBA = function(){
118 // get the integer RGB components
119 var rgb = this.getIntegerRGB();
121 // return the CSS integer RGBA Color value
122 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
127 * @returns a string representing this Color as a CSS percentage RGB Color
128 * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
129 * b are in the range [0,100].
131 this.getCSSPercentageRGB = function(){
133 // get the percentage RGB components
134 var rgb = this.getPercentageRGB();
136 // return the CSS RGB Color value
137 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
142 * @returns a string representing this Color as a CSS percentage RGBA Color
143 * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
144 * and b are in the range [0,100] and a is in the range [0,1].
146 this.getCSSPercentageRGBA = function(){
148 // get the percentage RGB components
149 var rgb = this.getPercentageRGB();
151 // return the CSS percentage RGBA Color value
152 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
157 * @returns a string representing this Color as a CSS HSL Color value - that
158 * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
159 * s and l are in the range [0,100].
161 this.getCSSHSL = function(){
163 // get the HSL components
164 var hsl = this.getHSL();
166 // return the CSS HSL Color value
167 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
172 * @returns a string representing this Color as a CSS HSLA Color value - that
173 * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
174 * s and l are in the range [0,100], and a is in the range [0,1].
176 this.getCSSHSLA = function(){
178 // get the HSL components
179 var hsl = this.getHSL();
181 // return the CSS HSL Color value
182 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
187 * Sets the Color of the specified node to this Color. This functions sets
188 * the CSS 'color' property for the node. The parameter is:
190 * @param {DomElement} node - the node whose Color should be set
192 this.setNodeColor = function(node){
194 // set the Color of the node
195 node.style.color = this.getCSSHexadecimalRGB();
200 * Sets the background Color of the specified node to this Color. This
201 * functions sets the CSS 'background-color' property for the node. The
204 * @param {DomElement} node - the node whose background Color should be set
206 this.setNodeBackgroundColor = function(node){
208 // set the background Color of the node
209 node.style.backgroundColor = this.getCSSHexadecimalRGB();
212 // convert between formats..
213 this.toRGB= function()
215 var r = this.getIntegerRGB();
216 return new Roo.lib.RGBColor(r.r,r.g,r.b,r.a);
219 this.toHSL = function()
221 var hsl = this.getHSL();
222 // return the CSS HSL Color value
223 return new Roo.lib.HSLColor(hsl.h, hsl.s, hsl.l , hsl.a );
227 this.toHSV = function()
229 var rgb = this.toRGB();
230 var hsv = rgb.getHSV();
231 // return the CSS HSL Color value
232 return new Roo.lib.HSVColor(hsv.h, hsv.s, hsv.v , hsv.a );
236 // modify v = 0 ... 1 (eg. 0.5)
237 this.saturate = function(v)
239 var rgb = this.toRGB();
240 var hsv = rgb.getHSV();
241 return new Roo.lib.HSVColor(hsv.h, hsv.s * v, hsv.v , hsv.a );
253 * @class Roo.lib.RGBColor
254 * @extends Roo.lib.Color
255 * Creates a Color specified in the RGB Color space, with an optional alpha
256 * component. The parameters are:
258 * r - the red component, clipped to the range [0,255]
259 * g - the green component, clipped to the range [0,255]
260 * b - the blue component, clipped to the range [0,255]
261 * a - the alpha component, clipped to the range [0,1] - this parameter is
262 * optional and defaults to 1
264 Roo.lib.RGBColor = function (r, g, b, a){
266 // store the alpha component after clipping it if necessary
267 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
269 // store the RGB components after clipping them if necessary
272 'r' : Math.max(0, Math.min(255, r)),
273 'g' : Math.max(0, Math.min(255, g)),
274 'b' : Math.max(0, Math.min(255, b))
277 // initialise the HSV and HSL components to null
282 * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
283 * range [0,360). The parameters are:
285 * maximum - the maximum of the RGB component values
286 * range - the range of the RGB component values
288 function getHue(maximum, range){
290 // check whether the range is zero
293 // set the hue to zero (any hue is acceptable as the Color is grey)
298 // determine which of the components has the highest value and set the hue
301 // red has the highest value
303 var hue = (rgb.g - rgb.b) / range * 60;
304 if (hue < 0) hue += 360;
307 // green has the highest value
309 var hue = (rgb.b - rgb.r) / range * 60 + 120;
312 // blue has the highest value
314 var hue = (rgb.r - rgb.g) / range * 60 + 240;
326 /* //private Calculates and stores the HSV components of this RGBColor so that they can
327 * be returned be the getHSV function.
329 function calculateHSV(){
331 // get the maximum and range of the RGB component values
332 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
333 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
335 // store the HSV components
338 'h' : getHue(maximum, range),
339 's' : (maximum == 0 ? 0 : 100 * range / maximum),
345 /* //private Calculates and stores the HSL components of this RGBColor so that they can
346 * be returned be the getHSL function.
348 function calculateHSL(){
350 // get the maximum and range of the RGB component values
351 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
352 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
354 // determine the lightness in the range [0,1]
355 var l = maximum / 255 - range / 510;
357 // store the HSL components
360 'h' : getHue(maximum, range),
361 's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
368 * @returns the RGB and alpha components of this RGBColor as an object with r,
369 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
372 this.getRGB = function(){
374 // return the RGB components
385 * @returns the HSV and alpha components of this RGBColor as an object with h,
386 * s, v, and a properties. h is in the range [0,360), s and v are in the range
387 * [0,100], and a is in the range [0,1].
389 this.getHSV = function(){
391 // calculate the HSV components if necessary
392 if (hsv == null) calculateHSV();
394 // return the HSV components
405 * @returns the HSL and alpha components of this RGBColor as an object with h,
406 * s, l, and a properties. h is in the range [0,360), s and l are in the range
407 * [0,100], and a is in the range [0,1].
409 this.getHSL = function(){
411 // calculate the HSV components if necessary
412 if (hsl == null) calculateHSL();
414 // return the HSL components
425 // this does an 'exteds'
426 Roo.lib.RGBColor.prototype = new Roo.lib.Color();
430 * @class Roo.lib.HSVColor
431 * @extends Roo.lib.Color
432 * Creates a Color specified in the HSV Color space, with an optional alpha
433 * component. The parameters are:
435 * h - the hue component, wrapped to the range [0,360)
436 * s - the saturation component, clipped to the range [0,100]
437 * v - the value component, clipped to the range [0,100]
438 * a - the alpha component, clipped to the range [0,1] - this parameter is
439 * optional and defaults to 1
441 Roo.lib.HSVColor = function (h, s, v, a){
443 // store the alpha component after clipping it if necessary
444 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
446 // store the HSV components after clipping or wrapping them if necessary
449 'h' : (h % 360 + 360) % 360,
450 's' : Math.max(0, Math.min(100, s)),
451 'v' : Math.max(0, Math.min(100, v))
454 // initialise the RGB and HSL components to null
458 /* Calculates and stores the RGB components of this HSVColor so that they can
459 * be returned be the getRGB function.
461 function calculateRGB(){
463 // check whether the saturation is zero
466 // set the Color to the appropriate shade of grey
473 // set some temporary values
474 var f = hsv.h / 60 - Math.floor(hsv.h / 60);
475 var p = hsv.v * (1 - hsv.s / 100);
476 var q = hsv.v * (1 - hsv.s / 100 * f);
477 var t = hsv.v * (1 - hsv.s / 100 * (1 - f));
479 // set the RGB Color components to their temporary values
480 switch (Math.floor(hsv.h / 60)){
481 case 0: var r = hsv.v; var g = t; var b = p; break;
482 case 1: var r = q; var g = hsv.v; var b = p; break;
483 case 2: var r = p; var g = hsv.v; var b = t; break;
484 case 3: var r = p; var g = q; var b = hsv.v; break;
485 case 4: var r = t; var g = p; var b = hsv.v; break;
486 case 5: var r = hsv.v; var g = p; var b = q; break;
491 // store the RGB components
501 /* Calculates and stores the HSL components of this HSVColor so that they can
502 * be returned be the getHSL function.
504 function calculateHSL(){
506 // determine the lightness in the range [0,100]
507 var l = (2 - hsv.s / 100) * hsv.v / 2;
509 // store the HSL components
513 's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
517 // correct a division-by-zero error
518 if (isNaN(hsl.s)) hsl.s = 0;
523 * @returns the RGB and alpha components of this HSVColor as an object with r,
524 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
527 this.getRGB = function(){
529 // calculate the RGB components if necessary
530 if (rgb == null) calculateRGB();
532 // return the RGB components
543 * @returns the HSV and alpha components of this HSVColor as an object with h,
544 * s, v, and a properties. h is in the range [0,360), s and v are in the range
545 * [0,100], and a is in the range [0,1].
547 this.getHSV = function(){
549 // return the HSV components
560 * @returns the HSL and alpha components of this HSVColor as an object with h,
561 * s, l, and a properties. h is in the range [0,360), s and l are in the range
562 * [0,100], and a is in the range [0,1].
564 this.getHSL = function(){
566 // calculate the HSL components if necessary
567 if (hsl == null) calculateHSL();
569 // return the HSL components
580 Roo.lib.HSVColor.prototype = new Roo.lib.Color();
584 * @class Roo.lib.HSLColor
585 * @extends Roo.lib.Color
587 * Creates a Color specified in the HSL Color space, with an optional alpha
588 * component. The parameters are:
590 * h - the hue component, wrapped to the range [0,360)
591 * s - the saturation component, clipped to the range [0,100]
592 * l - the lightness component, clipped to the range [0,100]
593 * a - the alpha component, clipped to the range [0,1] - this parameter is
594 * optional and defaults to 1
597 Roo.lib.HSLColor = function(h, s, l, a){
599 // store the alpha component after clipping it if necessary
600 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
602 // store the HSL components after clipping or wrapping them if necessary
605 'h' : (h % 360 + 360) % 360,
606 's' : Math.max(0, Math.min(100, s)),
607 'l' : Math.max(0, Math.min(100, l))
610 // initialise the RGB and HSV components to null
614 /* Calculates and stores the RGB components of this HSLColor so that they can
615 * be returned be the getRGB function.
617 function calculateRGB(){
619 // check whether the saturation is zero
622 // store the RGB components representing the appropriate shade of grey
632 // set some temporary values
634 ? hsl.l * (1 + hsl.s / 100)
635 : hsl.l + hsl.s - hsl.l * hsl.s / 100;
636 var q = 2 * hsl.l - p;
638 // initialise the RGB components
641 'r' : (h + 120) / 60 % 6,
643 'b' : (h + 240) / 60 % 6
646 // loop over the RGB components
647 for (var key in rgb){
649 // ensure that the property is not inherited from the root object
650 if (rgb.hasOwnProperty(key)){
652 // set the component to its value in the range [0,100]
654 rgb[key] = q + (p - q) * rgb[key];
655 }else if (rgb[key] < 3){
657 }else if (rgb[key] < 4){
658 rgb[key] = q + (p - q) * (4 - rgb[key]);
663 // set the component to its value in the range [0,255]
674 /* Calculates and stores the HSV components of this HSLColor so that they can
675 * be returned be the getHSL function.
677 function calculateHSV(){
679 // set a temporary value
680 var t = hsl.s * (hsl.l < 50 ? hsl.l : 100 - hsl.l) / 100;
682 // store the HSV components
686 's' : 200 * t / (hsl.l + t),
690 // correct a division-by-zero error
691 if (isNaN(hsv.s)) hsv.s = 0;
696 * @returns the RGB and alpha components of this HSLColor as an object with r,
697 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
700 this.getRGB = function(){
702 // calculate the RGB components if necessary
703 if (rgb == null) calculateRGB();
705 // return the RGB components
716 * @returns the HSV and alpha components of this HSLColor as an object with h,
717 * s, v, and a properties. h is in the range [0,360), s and v are in the range
718 * [0,100], and a is in the range [0,1].
720 this.getHSV = function(){
722 // calculate the HSV components if necessary
723 if (hsv == null) calculateHSV();
725 // return the HSV components
736 * @returns the HSL and alpha components of this HSLColor as an object with h,
737 * s, l, and a properties. h is in the range [0,360), s and l are in the range
738 * [0,100], and a is in the range [0,1].
740 this.getHSL = function(){
742 // return the HSL components
753 Roo.lib.HSLColor.prototype = new Roo.lib.Color();