liorean

01-16-2004, 12:35 AM

Because of the thread <http://codingforums.com/showthread.php?s=&postid=163715> I created some RGB-to-HSL and HSL-to-RGB functions for JavaScript that I think might be useful for some of you.

function fnRgbToHsl(r, g, b){ // R G B as integers, 0..255.

r /= 255;

g /= 255;

b /= 255;

var

max = Math.max(r, g, b),

min = Math.min(r, g, b),

l = (max + min) / 2;

h = 0,

s = 0;

if(max != min){

s = (l < .5)?

(max - min) / (max + min):

(max - min) / (2 - max - min)

h = (max != r)?

(max != g)?

4 * (r - g) / (max - min):

2 * (b - r) / (max - min):

(g - b) / (max - min);

}

h *= 60;

if(h < 0)

h += 360;

return [h, s, l];

}

function fnHslToRgb(h, s, l){ // H as degrees 0..360, S L as decimals, 0..1.

h /= 360;

function fnHueToRgb(x, y, h){

if(h < 0)

h += 1;

else if(h > 1)

h -= 1;

return ((h * 6 < 1)?

x +(y - x) * h * 6:

(h * 2 < 1)?

y:

(h * 3 < 2)?

x + (y - x) * (2 / 3 - h) * 6:

x);

}

var

y = (l > .5)?

l + s - l * s:

l * (s + 1),

x = l * 2 - y,

r = fnHueToRgb(x, y, h + 1 / 3) * 255,

g = fnHueToRgb(x, y, h) * 255,

b = fnHueToRgb(x, y, h - 1 / 3) * 255;

return [r, g, b];

}If I get the time, I'll build some tools around them, such as methods of getting triad colours, complementary and split complimentary colours, analogous colours, saturation variations, luminance variations (tints and shades) and hue variations (chromatic variations).

function fnRgbToHsl(r, g, b){ // R G B as integers, 0..255.

r /= 255;

g /= 255;

b /= 255;

var

max = Math.max(r, g, b),

min = Math.min(r, g, b),

l = (max + min) / 2;

h = 0,

s = 0;

if(max != min){

s = (l < .5)?

(max - min) / (max + min):

(max - min) / (2 - max - min)

h = (max != r)?

(max != g)?

4 * (r - g) / (max - min):

2 * (b - r) / (max - min):

(g - b) / (max - min);

}

h *= 60;

if(h < 0)

h += 360;

return [h, s, l];

}

function fnHslToRgb(h, s, l){ // H as degrees 0..360, S L as decimals, 0..1.

h /= 360;

function fnHueToRgb(x, y, h){

if(h < 0)

h += 1;

else if(h > 1)

h -= 1;

return ((h * 6 < 1)?

x +(y - x) * h * 6:

(h * 2 < 1)?

y:

(h * 3 < 2)?

x + (y - x) * (2 / 3 - h) * 6:

x);

}

var

y = (l > .5)?

l + s - l * s:

l * (s + 1),

x = l * 2 - y,

r = fnHueToRgb(x, y, h + 1 / 3) * 255,

g = fnHueToRgb(x, y, h) * 255,

b = fnHueToRgb(x, y, h - 1 / 3) * 255;

return [r, g, b];

}If I get the time, I'll build some tools around them, such as methods of getting triad colours, complementary and split complimentary colours, analogous colours, saturation variations, luminance variations (tints and shades) and hue variations (chromatic variations).