konvertieren hsla zu rgba von javascript oder jquery

Question

Ich begann vor einem Monat Javascript zu lernen. So viel weiß ich nicht über reines Javascript. Ich lerne jquery und jquery ui. Ich versuche, hsla-Werte in rgba-Werte zu konvertieren. Ich benutze jquery ui Schieberegler für die Auswahl hsla Farbe. Jetzt möchte ich diesen jquery ui Schiebereglerwert in rgba Wert umwandeln. Hier ist die fiddle. Ich habe einige Lösungen im Stackoverflow und im Web gefunden. Aber ich verstehe nicht, wie man sie mit jquery ui Schieberegler verwendet. Alle Lösungen sehen fast gleich aus. So, hier einer von ihnen:

/** 
* 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]; 
} 

Ich fand diese here und here.
Ich fand auch hslpicker.com die haben was ich will.

Answer 1

Ich habe deine Fiedel leicht modifiziert. Sie können es hier sehen: https://jsfiddle.net/5n5v2ygb/

Kurzbeschreibung. Ich habe ähnlichen Code aus dem gesamten Handler Ihres Sliders in zwei Funktionen verschoben. Eine Funktion legt die Farbe fest und füllt zwei Textfelder aus. Diese Funktion verwendet auch 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 
      }); 

    } 

Zweite man nur diese Funktion aufrufen und den Wert von slider.slide

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