5 Functions for colour handling and processing.
7 http://www.safalra.com/web-design/javascript/colour-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/
20 /* An abstract Colour implementation. Concrete Colour implementations should use
21 * an instance of this function as their prototype, and implement the getRGB and
22 * getHSL functions. getRGB should return an object representing the RGB
23 * components of this Colour, with the red, green, and blue components in the
24 * range [0,255] and the alpha component in the range [0,100]. getHSL should
25 * return an object representing the HSL components of this Colour, with the hue
26 * component in the range [0,360), the saturation and lightness components in
27 * the range [0,100], and the alpha component in the range [0,1].
29 Roo.lib.Colour = function(){
31 /* Returns an object representing the RGBA components of this Colour. The red,
32 * green, and blue components are converted to integers in the range [0,255].
33 * The alpha is a value in the range [0,1].
35 this.getIntegerRGB = function(){
37 // get the RGB components of this colour
38 var rgb = this.getRGB();
40 // return the integer components
42 'r' : Math.round(rgb.r),
43 'g' : Math.round(rgb.g),
44 'b' : Math.round(rgb.b),
50 /* Returns an object representing the RGBA components of this Colour. The red,
51 * green, and blue components are converted to numbers in the range [0,100].
52 * The alpha is a value in the range [0,1].
54 this.getPercentageRGB = function(){
56 // get the RGB components of this colour
57 var rgb = this.getRGB();
59 // return the percentage components
61 'r' : 100 * rgb.r / 255,
62 'g' : 100 * rgb.g / 255,
63 'b' : 100 * rgb.b / 255,
69 /* Returns a string representing this Colour as a CSS hexadecimal RGB colour
70 * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
71 * are two-digit hexadecimal numbers.
73 this.getCSSHexadecimalRGB = function(){
75 // get the integer RGB components
76 var rgb = this.getIntegerRGB();
78 // determine the hexadecimal equivalents
79 var r16 = rgb.r.toString(16);
80 var g16 = rgb.g.toString(16);
81 var b16 = rgb.b.toString(16);
83 // return the CSS RGB colour value
85 + (r16.length == 2 ? r16 : '0' + r16)
86 + (g16.length == 2 ? g16 : '0' + g16)
87 + (b16.length == 2 ? b16 : '0' + b16);
91 /* Returns a string representing this Colour as a CSS integer RGB colour
92 * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
93 * are integers in the range [0,255].
95 this.getCSSIntegerRGB = function(){
97 // get the integer RGB components
98 var rgb = this.getIntegerRGB();
100 // return the CSS RGB colour value
101 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
105 /* Returns a string representing this Colour as a CSS integer RGBA colour
106 * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
107 * b are integers in the range [0,255] and a is in the range [0,1].
109 this.getCSSIntegerRGBA = function(){
111 // get the integer RGB components
112 var rgb = this.getIntegerRGB();
114 // return the CSS integer RGBA colour value
115 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
119 /* Returns a string representing this Colour as a CSS percentage RGB colour
120 * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
121 * b are in the range [0,100].
123 this.getCSSPercentageRGB = function(){
125 // get the percentage RGB components
126 var rgb = this.getPercentageRGB();
128 // return the CSS RGB colour value
129 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
133 /* Returns a string representing this Colour as a CSS percentage RGBA colour
134 * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
135 * and b are in the range [0,100] and a is in the range [0,1].
137 this.getCSSPercentageRGBA = function(){
139 // get the percentage RGB components
140 var rgb = this.getPercentageRGB();
142 // return the CSS percentage RGBA colour value
143 return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
147 /* Returns a string representing this Colour as a CSS HSL colour value - that
148 * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
149 * s and l are in the range [0,100].
151 this.getCSSHSL = function(){
153 // get the HSL components
154 var hsl = this.getHSL();
156 // return the CSS HSL colour value
157 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
161 /* Returns a string representing this Colour as a CSS HSLA colour value - that
162 * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
163 * s and l are in the range [0,100], and a is in the range [0,1].
165 this.getCSSHSLA = function(){
167 // get the HSL components
168 var hsl = this.getHSL();
170 // return the CSS HSL colour value
171 return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
175 /* Sets the colour of the specified node to this Colour. This functions sets
176 * the CSS 'color' property for the node. The parameter is:
178 * node - the node whose colour should be set
180 this.setNodeColour = function(node){
182 // set the colour of the node
183 node.style.color = this.getCSSHexadecimalRGB();
187 /* Sets the background colour of the specified node to this Colour. This
188 * functions sets the CSS 'background-color' property for the node. The
191 * node - the node whose background colour should be set
193 this.setNodeBackgroundColour = function(node){
195 // set the background colour of the node
196 node.style.backgroundColor = this.getCSSHexadecimalRGB();
199 // convert between formats..
202 var r = this.getIntegerRGB();
203 return new Roo.lib.RGBColour(r.r,r,g,r,b,r.a);
208 var hsl = this.getHSL();
209 // return the CSS HSL colour value
210 return new Roo.lib.HSLColour(hsl.h, hsl.s, hsl.l , hsl.a );
216 var rgb = this.toRGB();
217 var hsv = rgb.getHSV();
218 var hsl = this.getHSL();
219 // return the CSS HSL colour value
220 return new Roo.lib.HSVColour(hsv.h, hsv.s, hsv.v , hsv.a );
230 /* Creates a colour specified in the RGB colour space, with an optional alpha
231 * component. The parameters are:
233 * r - the red component, clipped to the range [0,255]
234 * g - the green component, clipped to the range [0,255]
235 * b - the blue component, clipped to the range [0,255]
236 * a - the alpha component, clipped to the range [0,1] - this parameter is
237 * optional and defaults to 1
239 Roo.lib.RGBColour = function (r, g, b, a){
241 // store the alpha component after clipping it if necessary
242 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
244 // store the RGB components after clipping them if necessary
247 'r' : Math.max(0, Math.min(255, r)),
248 'g' : Math.max(0, Math.min(255, g)),
249 'b' : Math.max(0, Math.min(255, b))
252 // initialise the HSV and HSL components to null
256 /* Returns the HSV or HSL hue component of this RGBColour. The hue is in the
257 * range [0,360). The parameters are:
259 * maximum - the maximum of the RGB component values
260 * range - the range of the RGB component values
262 function getHue(maximum, range){
264 // check whether the range is zero
267 // set the hue to zero (any hue is acceptable as the colour is grey)
272 // determine which of the components has the highest value and set the hue
275 // red has the highest value
277 var hue = (rgb.g - rgb.b) / range * 60;
278 if (hue < 0) hue += 360;
281 // green has the highest value
283 var hue = (rgb.b - rgb.r) / range * 60 + 120;
286 // blue has the highest value
288 var hue = (rgb.r - rgb.g) / range * 60 + 240;
300 /* Calculates and stores the HSV components of this RGBColour so that they can
301 * be returned be the getHSV function.
303 function calculateHSV(){
305 // get the maximum and range of the RGB component values
306 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
307 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
309 // store the HSV components
312 'h' : getHue(maximum, range),
313 's' : (maximum == 0 ? 0 : 100 * range / maximum),
319 /* Calculates and stores the HSL components of this RGBColour so that they can
320 * be returned be the getHSL function.
322 function calculateHSL(){
324 // get the maximum and range of the RGB component values
325 var maximum = Math.max(rgb.r, rgb.g, rgb.b);
326 var range = maximum - Math.min(rgb.r, rgb.g, rgb.b);
328 // determine the lightness in the range [0,1]
329 var l = maximum / 255 - range / 510;
331 // store the HSL components
334 'h' : getHue(maximum, range),
335 's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
341 /* Returns the RGB and alpha components of this RGBColour as an object with r,
342 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
345 this.getRGB = function(){
347 // return the RGB components
357 /* Returns the HSV and alpha components of this RGBColour as an object with h,
358 * s, v, and a properties. h is in the range [0,360), s and v are in the range
359 * [0,100], and a is in the range [0,1].
361 this.getHSV = function(){
363 // calculate the HSV components if necessary
364 if (hsv == null) calculateHSV();
366 // return the HSV components
376 /* Returns the HSL and alpha components of this RGBColour as an object with h,
377 * s, l, and a properties. h is in the range [0,360), s and l are in the range
378 * [0,100], and a is in the range [0,1].
380 this.getHSL = function(){
382 // calculate the HSV components if necessary
383 if (hsl == null) calculateHSL();
385 // return the HSL components
396 Roo.lib.RGBColour.prototype = new Roo.lib.Colour();
399 /* Creates a colour specified in the HSV colour space, with an optional alpha
400 * component. The parameters are:
402 * h - the hue component, wrapped to the range [0,360)
403 * s - the saturation component, clipped to the range [0,100]
404 * v - the value component, clipped to the range [0,100]
405 * a - the alpha component, clipped to the range [0,1] - this parameter is
406 * optional and defaults to 1
408 Roo.lib.HSVColour = function (h, s, v, a){
410 // store the alpha component after clipping it if necessary
411 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
413 // store the HSV components after clipping or wrapping them if necessary
416 'h' : (h % 360 + 360) % 360,
417 's' : Math.max(0, Math.min(100, s)),
418 'v' : Math.max(0, Math.min(100, v))
421 // initialise the RGB and HSL components to null
425 /* Calculates and stores the RGB components of this HSVColour so that they can
426 * be returned be the getRGB function.
428 function calculateRGB(){
430 // check whether the saturation is zero
433 // set the colour to the appropriate shade of grey
440 // set some temporary values
441 var f = hsv.h / 60 - Math.floor(hsv.h / 60);
442 var p = hsv.v * (1 - hsv.s / 100);
443 var q = hsv.v * (1 - hsv.s / 100 * f);
444 var t = hsv.v * (1 - hsv.s / 100 * (1 - f));
446 // set the RGB colour components to their temporary values
447 switch (Math.floor(hsv.h / 60)){
448 case 0: var r = hsv.v; var g = t; var b = p; break;
449 case 1: var r = q; var g = hsv.v; var b = p; break;
450 case 2: var r = p; var g = hsv.v; var b = t; break;
451 case 3: var r = p; var g = q; var b = hsv.v; break;
452 case 4: var r = t; var g = p; var b = hsv.v; break;
453 case 5: var r = hsv.v; var g = p; var b = q; break;
458 // store the RGB components
468 /* Calculates and stores the HSL components of this HSVColour so that they can
469 * be returned be the getHSL function.
471 function calculateHSL(){
473 // determine the lightness in the range [0,100]
474 var l = (2 - hsv.s / 100) * hsv.v / 2;
476 // store the HSL components
480 's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
484 // correct a division-by-zero error
485 if (isNaN(hsl.s)) hsl.s = 0;
489 /* Returns the RGB and alpha components of this HSVColour as an object with r,
490 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
493 this.getRGB = function(){
495 // calculate the RGB components if necessary
496 if (rgb == null) calculateRGB();
498 // return the RGB components
508 /* Returns the HSV and alpha components of this HSVColour as an object with h,
509 * s, v, and a properties. h is in the range [0,360), s and v are in the range
510 * [0,100], and a is in the range [0,1].
512 this.getHSV = function(){
514 // return the HSV components
524 /* Returns the HSL and alpha components of this HSVColour as an object with h,
525 * s, l, and a properties. h is in the range [0,360), s and l are in the range
526 * [0,100], and a is in the range [0,1].
528 this.getHSL = function(){
530 // calculate the HSL components if necessary
531 if (hsl == null) calculateHSL();
533 // return the HSL components
544 Roo.lib.HSVColour.prototype = new Roo.lib.Colour();
547 /* Creates a colour specified in the HSL colour space, with an optional alpha
548 * component. The parameters are:
550 * h - the hue component, wrapped to the range [0,360)
551 * s - the saturation component, clipped to the range [0,100]
552 * l - the lightness component, clipped to the range [0,100]
553 * a - the alpha component, clipped to the range [0,1] - this parameter is
554 * optional and defaults to 1
557 Roo.lib.HSLColour = function(h, s, l, a){
559 // store the alpha component after clipping it if necessary
560 var alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
562 // store the HSL components after clipping or wrapping them if necessary
565 'h' : (h % 360 + 360) % 360,
566 's' : Math.max(0, Math.min(100, s)),
567 'l' : Math.max(0, Math.min(100, l))
570 // initialise the RGB and HSV components to null
574 /* Calculates and stores the RGB components of this HSLColour so that they can
575 * be returned be the getRGB function.
577 function calculateRGB(){
579 // check whether the saturation is zero
582 // store the RGB components representing the appropriate shade of grey
592 // set some temporary values
594 ? hsl.l * (1 + hsl.s / 100)
595 : hsl.l + hsl.s - hsl.l * hsl.s / 100;
596 var q = 2 * hsl.l - p;
598 // initialise the RGB components
601 'r' : (h + 120) / 60 % 6,
603 'b' : (h + 240) / 60 % 6
606 // loop over the RGB components
607 for (var key in rgb){
609 // ensure that the property is not inherited from the root object
610 if (rgb.hasOwnProperty(key)){
612 // set the component to its value in the range [0,100]
614 rgb[key] = q + (p - q) * rgb[key];
615 }else if (rgb[key] < 3){
617 }else if (rgb[key] < 4){
618 rgb[key] = q + (p - q) * (4 - rgb[key]);
623 // set the component to its value in the range [0,255]
634 /* Calculates and stores the HSV components of this HSLColour so that they can
635 * be returned be the getHSL function.
637 function calculateHSV(){
639 // set a temporary value
640 var t = hsl.s * (hsl.l < 50 ? hsl.l : 100 - hsl.l) / 100;
642 // store the HSV components
646 's' : 200 * t / (hsl.l + t),
650 // correct a division-by-zero error
651 if (isNaN(hsv.s)) hsv.s = 0;
655 /* Returns the RGB and alpha components of this HSLColour as an object with r,
656 * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
659 this.getRGB = function(){
661 // calculate the RGB components if necessary
662 if (rgb == null) calculateRGB();
664 // return the RGB components
674 /* Returns the HSV and alpha components of this HSLColour as an object with h,
675 * s, v, and a properties. h is in the range [0,360), s and v are in the range
676 * [0,100], and a is in the range [0,1].
678 this.getHSV = function(){
680 // calculate the HSV components if necessary
681 if (hsv == null) calculateHSV();
683 // return the HSV components
693 /* Returns the HSL and alpha components of this HSLColour as an object with h,
694 * s, l, and a properties. h is in the range [0,360), s and l are in the range
695 * [0,100], and a is in the range [0,1].
697 this.getHSL = function(){
699 // return the HSL components
710 Roo.lib.HSLColour.prototype = new Roo.lib.Colour();