javascriptまたはjqueryでhslaをrgbaに変換する

Question

私は1ヶ月前にjavascriptを学習し始めました。だから私は純粋なjavascriptについてそれほど知りません。私はjqueryとjquery UIを学んでいます。私はhsla値をrgba値に変換しようとしています。私はhsla色を選択するためにjquery UIスライダーを使用しています。今私はこれらのjquery UIスライダの値をrgba値に変換したいと思います。ここにはfiddleがあります。私はstackoverflowとウェブ上でいくつかのソリューションを見つけました。しかし、私はjQuery UIスライダーでそれらを使用する方法を理解していません。すべてのソリューションはほぼ同じように見えます。だから、ここではそれらの1：

/** 
* 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/

簡単な説明。私はあなたのすべてのスライダのハンドラから同様のコードを2つの関数に移動しました。 1つの機能が色を設定し、適切な2つのテキストフィールドを入力します。この関数は、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 
      }); 

    } 

2つ目だけでこの関数を呼び出し、[ここ] slider.slide

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