通过javascript或jquery将hsla转换为rgba

Question

一个月前我开始学习javascript。所以我不太了解纯JavaScript。我正在学习jquery和jQuery UI。我正在尝试将hsla值转换为rgba值。我正在使用jquery ui滑块来选择hsla颜色。现在我想将这些jquery ui滑块值转换为rgba值。这里是fiddle。我在stackoverflow和web上发现了一些解决方案。但我不明白如何使用jQuery UI滑块。所有的解决方案看起来都差不多。因此，他们在这里一个：

/** 
* Converts an RGB color value to HSL. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. 
* Assumes r, g, and b are contained in the set [0, 255] and 
* returns h, s, and l in the set [0, 1]. 
* 
* @param Number r  The red color value 
* @param Number g  The green color value 
* @param Number b  The blue color value 
* @return Array   The HSL representation 
*/ 
function rgbToHsl(r, g, b){ 
    r /= 255, g /= 255, b /= 255; 
    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, l = (max + min)/2; 

    if(max == min){ 
     h = s = 0; // achromatic 
    }else{ 
     var d = max - min; 
     s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
     switch(max){ 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2; break; 
      case b: h = (r - g)/d + 4; break; 
     } 
     h /= 6; 
    } 

    return [h, s, l]; 
} 

/** 
* Converts an HSL color value to RGB. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. 
* Assumes h, s, and l are contained in the set [0, 1] and 
* returns r, g, and b in the set [0, 255]. 
* 
* @param Number h  The hue 
* @param Number s  The saturation 
* @param Number l  The lightness 
* @return Array   The RGB representation 
*/ 
function hslToRgb(h, s, l){ 
    var r, g, b; 

    if(s == 0){ 
     r = g = b = l; // achromatic 
    }else{ 
     function hue2rgb(p, q, t){ 
      if(t < 0) t += 1; 
      if(t > 1) t -= 1; 
      if(t < 1/6) return p + (q - p) * 6 * t; 
      if(t < 1/2) return q; 
      if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; 
      return p; 
     } 

     var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 
     var p = 2 * l - q; 
     r = hue2rgb(p, q, h + 1/3); 
     g = hue2rgb(p, q, h); 
     b = hue2rgb(p, q, h - 1/3); 
    } 

    return [r * 255, g * 255, b * 255]; 
} 

/** 
* Converts an RGB color value to HSV. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSV_color_space. 
* Assumes r, g, and b are contained in the set [0, 255] and 
* returns h, s, and v in the set [0, 1]. 
* 
* @param Number r  The red color value 
* @param Number g  The green color value 
* @param Number b  The blue color value 
* @return Array   The HSV representation 
*/ 
function rgbToHsv(r, g, b){ 
    r = r/255, g = g/255, b = b/255; 
    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, v = max; 

    var d = max - min; 
    s = max == 0 ? 0 : d/max; 

    if(max == min){ 
     h = 0; // achromatic 
    }else{ 
     switch(max){ 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2; break; 
      case b: h = (r - g)/d + 4; break; 
     } 
     h /= 6; 
    } 

    return [h, s, v]; 
} 

/** 
* Converts an HSV color value to RGB. Conversion formula 
* adapted from http://en.wikipedia.org/wiki/HSV_color_space. 
* Assumes h, s, and v are contained in the set [0, 1] and 
* returns r, g, and b in the set [0, 255]. 
* 
* @param Number h  The hue 
* @param Number s  The saturation 
* @param Number v  The value 
* @return Array   The RGB representation 
*/ 
function hsvToRgb(h, s, v){ 
    var r, g, b; 

    var i = Math.floor(h * 6); 
    var f = h * 6 - i; 
    var p = v * (1 - s); 
    var q = v * (1 - f * s); 
    var t = v * (1 - (1 - f) * s); 

    switch(i % 6){ 
     case 0: r = v, g = t, b = p; break; 
     case 1: r = q, g = v, b = p; break; 
     case 2: r = p, g = v, b = t; break; 
     case 3: r = p, g = q, b = v; break; 
     case 4: r = t, g = p, b = v; break; 
     case 5: r = v, g = p, b = q; break; 
    } 

    return [r * 255, g * 255, b * 255]; 
} 

我发现这个here和here。
我还发现hslpicker.com哪些有我想要的。

Answer 1

我微微修改了你的小提琴。你可以在这里看到：https://jsfiddle.net/5n5v2ygb/

简要说明。我将所有滑块处理程序中的类似代码移出两个函数。一个函数设置颜色并适当填充两个文本字段。这个函数也使用hslToRgb。

function setColor(hue,sat,light,alpha) { 
     var hsla = "hsla(" + hue + "," + sat + "%, " + light + "%, " + alpha + ")"; 
    var rgb = hslToRgb(hue/360,sat/100,light/100), 
      rgba = "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+alpha+")"; 

      $("#slidevalue").text(hsla); 
      $("#slidevalue-rgba").text(rgba); 

      $(".slidevalue").css({ 
       "background-color": hsla 
      }); 

    } 

第二个只需要调用这个函数并替换slider.slide

function handler() { 
     setColor($('#range-slider1').slider('value'),$('#range-slider2').slider('value'), 
       $('#range-slider3').slider('value'), 
       $('#range-slider4').slider('value')); 
    }