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
23 * An abstract Color implementation. Concrete Color implementations should use
24 * an instance of this function as their prototype, and implement the getRGB and
25 * getHSL functions. getRGB should return an object representing the RGB
26 * components of this Color, with the red, green, and blue components in the
27 * range [0,255] and the alpha component in the range [0,100]. getHSL should
28 * return an object representing the HSL components of this Color, with the hue
29 * component in the range [0,360), the saturation and lightness components in
30 * the range [0,100], and the alpha component in the range [0,1].
32 Roo.lib.Color = function(){
35 Roo.apply(Roo.lib.Color.prototype, {
37 * @returns an object representing the RGBA components of this Color. The red,
38 * green, and blue components are converted to integers in the range [0,255].
39 * The alpha is a value in the range [0,1].
41 getIntegerRGB : function(){
43 // get the RGB components of this Color
44 var rgb = this.getRGB();
46 // return the integer components
48 'r' : Math.round(rgb.r),
49 'g' : Math.round(rgb.g),
50 'b' : Math.round(rgb.b),
57 * @returns an object representing the RGBA components of this Color. The red,
58 * green, and blue components are converted to numbers in the range [0,100].
59 * The alpha is a value in the range [0,1].
61 getPercentageRGB : function(){
63 // get the RGB components of this Color
64 var rgb = this.getRGB();
66 // return the percentage components
68 'r' : 100 * rgb.r / 255,
69 'g' : 100 * rgb.g / 255,
70 'b' : 100 * rgb.b / 255,
77 * @returns a string representing this Color as a CSS hexadecimal RGB Color
78 * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
79 * are two-digit hexadecimal numbers.
81 getCSSHexadecimalRGB : function()
84 // get the integer RGB components
85 var rgb = this.getIntegerRGB();
87 // determine the hexadecimal equivalents
88 var r16 = rgb.r.toString(16);
89 var g16 = rgb.g.toString(16);
90 var b16 = rgb.b.toString(16);
92 // return the CSS RGB Color value
94 + (r16.length == 2 ? r16 : '0' + r16)
95 + (g16.length == 2 ? g16 : '0' + g16)
96 + (b16.length == 2 ? b16 : '0' + b16);
101 * @returns a string representing this Color as a CSS integer RGB Color
102 * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
103 * are integers in the range [0,255].
105 getCSSIntegerRGB : function(){
107 // get the integer RGB components
108 var rgb = this.getIntegerRGB();
110 // return the CSS RGB Color value
111 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
116 * @returns Returns a string representing this Color as a CSS integer RGBA Color
117 * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
118 * b are integers in the range [0,255] and a is in the range [0,1].
120 getCSSIntegerRGBA : function(){
122 // get the integer RGB components
123 var rgb = this.getIntegerRGB();
125 // return the CSS integer RGBA Color value
126 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
131 * @returns a string representing this Color as a CSS percentage RGB Color
132 * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
133 * b are in the range [0,100].
135 getCSSPercentageRGB : function(){
137 // get the percentage RGB components
138 var rgb = this.getPercentageRGB();
140 // return the CSS RGB Color value
141 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
146 * @returns a string representing this Color as a CSS percentage RGBA Color
147 * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
148 * and b are in the range [0,100] and a is in the range [0,1].
150 getCSSPercentageRGBA : function(){
152 // get the percentage RGB components
153 var rgb = this.getPercentageRGB();
155 // return the CSS percentage RGBA Color value
156 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
161 * @returns a string representing this Color as a CSS HSL Color value - that
162 * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
163 * s and l are in the range [0,100].
165 getCSSHSL : function(){
167 // get the HSL components
168 var hsl = this.getHSL();
170 // return the CSS HSL Color value
171 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
176 * @returns a string representing this Color as a CSS HSLA Color value - that
177 * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
178 * s and l are in the range [0,100], and a is in the range [0,1].
180 getCSSHSLA : function(){
182 // get the HSL components
183 var hsl = this.getHSL();
185 // return the CSS HSL Color value
186 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
191 * Sets the Color of the specified node to this Color. This functions sets
192 * the CSS 'color' property for the node. The parameter is:
194 * @param {DomElement} node - the node whose Color should be set
196 setNodeColor : function(node){
198 // set the Color of the node
199 node.style.color = this.getCSSHexadecimalRGB();
204 * Sets the background Color of the specified node to this Color. This
205 * functions sets the CSS 'background-color' property for the node. The
208 * @param {DomElement} node - the node whose background Color should be set
210 setNodeBackgroundColor : function(node){
212 // set the background Color of the node
213 node.style.backgroundColor = this.getCSSHexadecimalRGB();
216 // convert between formats..
219 var r = this.getIntegerRGB();
220 return new Roo.lib.RGBColor(r.r,r.g,r.b,r.a);
225 var hsl = this.getHSL();
226 // return the CSS HSL Color value
227 return new Roo.lib.HSLColor(hsl.h, hsl.s, hsl.l , hsl.a );
233 var rgb = this.toRGB();
234 var hsv = rgb.getHSV();
235 // return the CSS HSL Color value
236 return new Roo.lib.HSVColor(hsv.h, hsv.s, hsv.v , hsv.a );
240 // modify v = 0 ... 1 (eg. 0.5)
241 saturate : function(v)
243 var rgb = this.toRGB();
244 var hsv = rgb.getHSV();
245 return new Roo.lib.HSVColor(hsv.h, hsv.s * v, hsv.v , hsv.a );
257 * @class Roo.lib.RGBColor
258 * @extends Roo.lib.Color
259 * Creates a Color specified in the RGB Color space, with an optional alpha
260 * component. The parameters are:
262 * r - the red component, clipped to the range [0,255]
263 * g - the green component, clipped to the range [0,255]
264 * b - the blue component, clipped to the range [0,255]
265 * a - the alpha component, clipped to the range [0,1] - this parameter is
266 * optional and defaults to 1
268 Roo.lib.RGBColor = function (r, g, b, a){
270 // store the alpha component after clipping it if necessary
271 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
273 // store the RGB components after clipping them if necessary
276 'r' : Math.max(0, Math.min(255, r)),
277 'g' : Math.max(0, Math.min(255, g)),
278 'b' : Math.max(0, Math.min(255, b))
281 // initialise the HSV and HSL components to null
286 * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
287 * range [0,360). The parameters are:
289 * maximum - the maximum of the RGB component values
290 * range - the range of the RGB component values
292 function getHue(maximum, range){
294 // check whether the range is zero
297 // set the hue to zero (any hue is acceptable as the Color is grey)
302 // determine which of the components has the highest value and set the hue
305 // red has the highest value
307 var hue = (rgb.g - rgb.b) / range * 60;
308 if (hue < 0) hue += 360;
311 // green has the highest value
313 var hue = (rgb.b - rgb.r) / range * 60 + 120;
316 // blue has the highest value
318 var hue = (rgb.r - rgb.g) / range * 60 + 240;
330 /* //private Calculates and stores the HSV components of this RGBColor so that they can
331 * be returned be the getHSV function.
333 function calculateHSV(){
335 // get the maximum and range of the RGB component values
336 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
337 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
339 // store the HSV components
342 'h' : getHue(maximum, range),
343 's' : (maximum == 0 ? 0 : 100 * range / maximum),
349 /* //private Calculates and stores the HSL components of this RGBColor so that they can
350 * be returned be the getHSL function.
352 function calculateHSL(){
354 // get the maximum and range of the RGB component values
355 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
356 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
358 // determine the lightness in the range [0,1]
359 var l = maximum / 255 - range / 510;
361 // store the HSL components
364 'h' : getHue(maximum, range),
365 's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
372 * @returns the RGB and alpha components of this RGBColor as an object with r,
373 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
376 this.getRGB = function(){
378 // return the RGB components
389 * @returns the HSV and alpha components of this RGBColor as an object with h,
390 * s, v, and a properties. h is in the range [0,360), s and v are in the range
391 * [0,100], and a is in the range [0,1].
393 this.getHSV = function(){
395 // calculate the HSV components if necessary
396 if (hsv == null) calculateHSV();
398 // return the HSV components
409 * @returns the HSL and alpha components of this RGBColor as an object with h,
410 * s, l, and a properties. h is in the range [0,360), s and l are in the range
411 * [0,100], and a is in the range [0,1].
413 this.getHSL = function(){
415 // calculate the HSV components if necessary
416 if (hsl == null) calculateHSL();
418 // return the HSL components
429 // this does an 'exteds'
430 Roo.lib.RGBColor.prototype = new Roo.lib.Color();
434 * @class Roo.lib.HSVColor
435 * @extends Roo.lib.Color
436 * Creates a Color specified in the HSV Color space, with an optional alpha
437 * component. The parameters are:
439 * h - the hue component, wrapped to the range [0,360)
440 * s - the saturation component, clipped to the range [0,100]
441 * v - the value component, clipped to the range [0,100]
442 * a - the alpha component, clipped to the range [0,1] - this parameter is
443 * optional and defaults to 1
445 Roo.lib.HSVColor = function (h, s, v, a){
447 // store the alpha component after clipping it if necessary
448 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
450 // store the HSV components after clipping or wrapping them if necessary
453 'h' : (h % 360 + 360) % 360,
454 's' : Math.max(0, Math.min(100, s)),
455 'v' : Math.max(0, Math.min(100, v))
458 // initialise the RGB and HSL components to null
462 /* Calculates and stores the RGB components of this HSVColor so that they can
463 * be returned be the getRGB function.
465 function calculateRGB(){
467 // check whether the saturation is zero
470 // set the Color to the appropriate shade of grey
477 // set some temporary values
478 var f = hsv.h / 60 - Math.floor(hsv.h / 60);
479 var p = hsv.v * (1 - hsv.s / 100);
480 var q = hsv.v * (1 - hsv.s / 100 * f);
481 var t = hsv.v * (1 - hsv.s / 100 * (1 - f));
483 // set the RGB Color components to their temporary values
484 switch (Math.floor(hsv.h / 60)){
485 case 0: var r = hsv.v; var g = t; var b = p; break;
486 case 1: var r = q; var g = hsv.v; var b = p; break;
487 case 2: var r = p; var g = hsv.v; var b = t; break;
488 case 3: var r = p; var g = q; var b = hsv.v; break;
489 case 4: var r = t; var g = p; var b = hsv.v; break;
490 case 5: var r = hsv.v; var g = p; var b = q; break;
495 // store the RGB components
505 /* Calculates and stores the HSL components of this HSVColor so that they can
506 * be returned be the getHSL function.
508 function calculateHSL(){
510 // determine the lightness in the range [0,100]
511 var l = (2 - hsv.s / 100) * hsv.v / 2;
513 // store the HSL components
517 's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
521 // correct a division-by-zero error
522 if (isNaN(hsl.s)) hsl.s = 0;
527 * @returns the RGB and alpha components of this HSVColor as an object with r,
528 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
531 this.getRGB = function(){
533 // calculate the RGB components if necessary
534 if (rgb == null) calculateRGB();
536 // return the RGB components
547 * @returns the HSV and alpha components of this HSVColor as an object with h,
548 * s, v, and a properties. h is in the range [0,360), s and v are in the range
549 * [0,100], and a is in the range [0,1].
551 this.getHSV = function(){
553 // return the HSV components
564 * @returns the HSL and alpha components of this HSVColor as an object with h,
565 * s, l, and a properties. h is in the range [0,360), s and l are in the range
566 * [0,100], and a is in the range [0,1].
568 this.getHSL = function(){
570 // calculate the HSL components if necessary
571 if (hsl == null) calculateHSL();
573 // return the HSL components
584 Roo.lib.HSVColor.prototype = new Roo.lib.Color();
588 * @class Roo.lib.HSLColor
589 * @extends Roo.lib.Color
591 * Creates a Color specified in the HSL Color space, with an optional alpha
592 * component. The parameters are:
594 * h - the hue component, wrapped to the range [0,360)
595 * s - the saturation component, clipped to the range [0,100]
596 * l - the lightness component, clipped to the range [0,100]
597 * a - the alpha component, clipped to the range [0,1] - this parameter is
598 * optional and defaults to 1
601 Roo.lib.HSLColor = function(h, s, l, a){
603 // store the alpha component after clipping it if necessary
604 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
606 // store the HSL components after clipping or wrapping them if necessary
609 'h' : (h % 360 + 360) % 360,
610 's' : Math.max(0, Math.min(100, s)),
611 'l' : Math.max(0, Math.min(100, l))
614 // initialise the RGB and HSV components to null
618 /* Calculates and stores the RGB components of this HSLColor so that they can
619 * be returned be the getRGB function.
621 function calculateRGB(){
623 // check whether the saturation is zero
626 // store the RGB components representing the appropriate shade of grey
636 // set some temporary values
638 ? hsl.l * (1 + hsl.s / 100)
639 : hsl.l + hsl.s - hsl.l * hsl.s / 100;
640 var q = 2 * hsl.l - p;
642 // initialise the RGB components
645 'r' : (h + 120) / 60 % 6,
647 'b' : (h + 240) / 60 % 6
650 // loop over the RGB components
651 for (var key in rgb){
653 // ensure that the property is not inherited from the root object
654 if (rgb.hasOwnProperty(key)){
656 // set the component to its value in the range [0,100]
658 rgb[key] = q + (p - q) * rgb[key];
659 }else if (rgb[key] < 3){
661 }else if (rgb[key] < 4){
662 rgb[key] = q + (p - q) * (4 - rgb[key]);
667 // set the component to its value in the range [0,255]
678 /* Calculates and stores the HSV components of this HSLColor so that they can
679 * be returned be the getHSL function.
681 function calculateHSV(){
683 // set a temporary value
684 var t = hsl.s * (hsl.l < 50 ? hsl.l : 100 - hsl.l) / 100;
686 // store the HSV components
690 's' : 200 * t / (hsl.l + t),
694 // correct a division-by-zero error
695 if (isNaN(hsv.s)) hsv.s = 0;
700 * @returns the RGB and alpha components of this HSLColor as an object with r,
701 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
704 this.getRGB = function(){
706 // calculate the RGB components if necessary
707 if (rgb == null) calculateRGB();
709 // return the RGB components
720 * @returns the HSV and alpha components of this HSLColor as an object with h,
721 * s, v, and a properties. h is in the range [0,360), s and v are in the range
722 * [0,100], and a is in the range [0,1].
724 this.getHSV = function(){
726 // calculate the HSV components if necessary
727 if (hsv == null) calculateHSV();
729 // return the HSV components
740 * @returns the HSL and alpha components of this HSLColor as an object with h,
741 * s, l, and a properties. h is in the range [0,360), s and l are in the range
742 * [0,100], and a is in the range [0,1].
744 this.getHSL = function(){
746 // return the HSL components
757 Roo.lib.HSLColor.prototype = new Roo.lib.Color();