I Am new to jquery ui. I recently doing a project in which I have some jquery ui sliders for hsla color picker. I have a slider with max value 360(hsla hue). I want to convert hsla to rgba. I searched on the web and I found some solutions for converting hsla to rgba. But I didn't know how to use them with slider value. So I decided that I will create new one and I got the pattern to convert hsla to rgba.
The pattern is:
when hsla hue value =0 rgba looks like : rgba(255, 0, 0 ,1). When hsla hue value =60 rgba looks like : rgba(255, 255, 0 ,1). That means, I need to change the rgba,s g(green) value from 0 to 255 with in hsla,s hue slider value between 0 to 60. Now, I am giving full list of hsla value = how much rgba,s value should be:
1 = rgba(255, 4, 0 ,1)
2 = rgba(255, 9, 0 ,1)
3 = rgba(255, 13, 0 ,1)
4 = rgba(255, 17, 0 ,1)
5 = rgba(255, 21, 0 ,1)
6 = rgba(255, 26, 0 ,1)
7 = rgba(255, 30, 0 ,1)
8 = rgba(255, 34, 0 ,1)
9 = rgba(255, 38, 0 ,1)
10 = rgba(255, 43, 0 ,1)
11 = rgba(255, 47, 0 ,1)
12 = rgba(255, 51, 0 ,1)
13 = rgba(255, 55, 0 ,1)
14 = rgba(255, 60, 0 ,1)
15 = rgba(255, 64, 0 ,1)
16 = rgba(255, 68, 0 ,1)
17 = rgba(255, 72, 0 ,1)
18 = rgba(255, 77, 0 ,1)
19 = rgba(255, 81, 0 ,1)
20 = rgba(255, 85, 0 ,1)
21 = rgba(255, 89, 0 ,1)
22 = rgba(255, 94, 0 ,1)
23 = rgba(255, 98, 0 ,1)
24 = rgba(255, 102, 0 ,1)
25 = rgba(255, 106, 0 ,1)
26 = rgba(255, 110, 0 ,1)
27 = rgba(255, 115, 0 ,1)
28 = rgba(255, 119, 0 ,1)
29 = rgba(255, 123, 0 ,1)
30 = rgba(255, 128, 0 ,1)
31 = rgba(255, 132, 0 ,1)
32 = rgba(255, 136, 0 ,1)
33 = rgba(255, 140, 0 ,1)
34 = rgba(255, 145, 0 ,1)
35 = rgba(255, 149, 0 ,1)
36 = rgba(255, 153, 0 ,1)
37 = rgba(255, 157, 0 ,1)
38 = rgba(255, 162, 0 ,1)
39 = rgba(255, 166, 0 ,1)
40 = rgba(255, 170, 0 ,1)
41 = rgba(255, 174, 0 ,1)
42 = rgba(255, 179, 0 ,1)
43 = rgba(255, 183, 0 ,1)
44 = rgba(255, 187, 0 ,1)
45 = rgba(255, 191, 0 ,1)
46 = rgba(255, 195, 0 ,1)
47 = rgba(255, 200, 0 ,1)
48 = rgba(255, 204, 0 ,1)
49 = rgba(255, 208, 0 ,1)
50 = rgba(255, 213, 0 ,1)
51 = rgba(255, 217, 0 ,1)
52 = rgba(255, 221, 0 ,1)
53 = rgba(255, 225, 0 ,1)
54 = rgba(255, 229, 0 ,1)
55 = rgba(255, 234, 0 ,1)
56 = rgba(255, 238, 0 ,1)
57 = rgba(255, 242, 0 ,1)
58 = rgba(255, 247, 0 ,1)
59 = rgba(255, 251, 0 ,1)
60 = rgba(255, 255, 0 ,1)
here I found what I want. but I can't understand what is happening on the source code for converting hsla to rgba.
Here is my codes on jsfiddle
$( "#range-slider" ).slider({
range:false,
min: 0,
max: 360,
value: 0,
step: 1,
slide: function( event, ui ) {
var num = ui.value;
$('.hsla-code').text("hsla(" + num + ", 100%, 50%, 1)");
if (num < 61) {
var rgba = "rgba(255, "+ num * 4 + ", 0, 1)";
$('.header').css({
background: rgba
});
$('.code').text(rgba);
} else if (num < 121) {
var nua = num - 60;
var nub = nua * 4;
var red = 255 - nub;
var rgba = "rgba("+ red +", 255, 0, 1)";
$('.header').css({
background: rgba
});
$('.code').text(rgba);
} else if (num < 181) {
var nua = num - 120;
var blue = nua * 4;
var rgba = "rgba(0, 255, " + blue + ", 1)";
$('.header').css({
background: rgba
});
$('.code').text(rgba);
} else if (num < 241) {
var nua = num - 180;
var nub = nua * 4;
var green = 255 - nub;
var rgba = "rgba(0, " + green + ", 255, 1)";
$('.header').css({
background: rgba
});
$('.code').text(rgba);
} else if (num < 301) {
var nua = num - 240;
var red = nua * 4;
var rgba = "rgba("+ red +", 0, 255, 1)";
$('.header').css({
background: rgba
});
$('.code').text(rgba);
} else if (num < 361) {
var nua = num - 300;
var nub = nua * 4;
var blue = 255 - nub;
var rgba = "rgba(255, 0, "+ blue +", 1)";
$('.header').css({
background: rgba
});
$('.code').text(rgba);
}
}
});
Looking at the W3Schools example, they use the following Functions to convert HSL to RGB:
function hslToRgb(hue, sat, light) {
var t1, t2, r, g, b;
hue = hue / 60;
if ( light <= 0.5 ) {
t2 = light * (sat + 1);
} else {
t2 = light + sat - (light * sat);
}
t1 = light * 2 - t2;
r = hueToRgb(t1, t2, hue + 2) * 255;
g = hueToRgb(t1, t2, hue) * 255;
b = hueToRgb(t1, t2, hue - 2) * 255;
return {r : r, g : g, b : b};
}
function hueToRgb(t1, t2, hue) {
if (hue < 0) hue += 6;
if (hue >= 6) hue -= 6;
if (hue < 1) return (t2 - t1) * hue + t1;
else if(hue < 3) return t2;
else if(hue < 4) return (t2 - t1) * (4 - hue) + t1;
else return t1;
}
In your fiddle, you're adjusting the Hue from 0 to 360 using the slider. Here is my working example:
https://jsfiddle.net/Twisty/q208xrrL/1/
JQuery
function hslToRgb(hue, sat, light) {
var t1, t2, r, g, b;
hue = hue / 60;
if (light <= 0.5) {
t2 = light * (sat + 1);
} else {
t2 = light + sat - (light * sat);
}
t1 = light * 2 - t2;
r = hueToRgb(t1, t2, hue + 2) * 255;
g = hueToRgb(t1, t2, hue) * 255;
b = hueToRgb(t1, t2, hue - 2) * 255;
return {
r: Math.floor(r),
g: Math.floor(g),
b: Math.floor(b)
};
}
function hueToRgb(t1, t2, hue) {
if (hue < 0) hue += 6;
if (hue >= 6) hue -= 6;
if (hue < 1) return (t2 - t1) * hue + t1;
else if (hue < 3) return t2;
else if (hue < 4) return (t2 - t1) * (4 - hue) + t1;
else return t1;
}
$("#range-slider").slider({
range: false,
min: 0,
max: 360,
value: 0,
step: 1,
slide: function(event, ui) {
var hue = ui.value;
var rgb = hslToRgb(hue, 1, .5);
var rgba = "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", 1)";
$('.header').css({
background: rgba
});
$('.code').text(rgba);
$('.hsla-code').text("hsla(" + hue + ", 100%, 50%, 1)");
}
});
The Hue value should be from 0 to 360. Sat., Light, and Alpha use 0.0 to 1.0 (0 to 100 %). So when you use it, pass a value like hslToRgb(100, 1, .5);. If you decide to make 3 or 4 sliders, this will be important.