Farbtastic HSL轉換回RGB或十六進制

Question

編輯：發佈解決方案

我想創建一個基於Farbtastic選擇的顏色色板。我對HSL值做了我的計算，因爲它更容易，併產生更好的結果。

正從Farbtastic的HSL值之後，我加入亮度創建新的顏色。新顏色採用HSL格式，我需要將它切換回RGB或十六進制，以便顯示並保存以備後用。有些瀏覽器顯示HSL，但我不相信所有的移動瀏覽器都會這樣做。

的問題是轉換變量「newcolor」回RGB或十六進制，一旦計算已完成。

// collect parent ids for farb 
$(".farbtastic").parent().each(writeColorpanel); 

function writeColorpanel (i, elem) { 
    var picker = $.farbtastic(elem); //farb object 
    picker.linkTo(onColorChange); //a farb function 
} 

    function onColorChange(color) { 

    // retrieve hsl value, do calculations and place in hidden input. 
    var hslcolor = $.farbtastic('#example_colorpicker_picker').hsl; 

    // brighten by 40% 
    var brightness = 1.4 * (Math.round(hslcolor[2]*10000)/10000); 
    if (brightness>1) { brightness = 1 }; 
    if (brightness<0) { brightness = 0; } 

    // create the new brighter color 
    var newcolor = hslcolor; 
    newcolor[2]=brightness; 

    //convert to rgb (safer than trusting all mobile browsers to display HSL) 
    var rgb = hsl2rgb(newcolor); 

    //apply the color to swatches 
    var firstSwatch = $('#section-example_colorpicker').find('.square1'); 
    firstSwatch.css({'background-color': color }); 
    var secondSwatch = $('#section-example_colorpicker').find('.square2'); 
    secondSwatch.css('background-color', 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'); 

} 

function hsl2rgb(hsl) { 
    var h = hsl[0], s = hsl[1], l = hsl[2]; 
    var m1, m2, hue; 
    var r, g, b 
    h = (Math.round(360*h)/1); 
    if (s == 0) 
     r = g = b = (l * 255); 
    else { 
     if (l <= 0.5) 
      m2 = l * (s + 1); 
     else 
      m2 = l + s - l * s; 
     m1 = l * 2 - m2; 
     hue = h/360; 
     r = Math.round(HueToRgb(m1, m2, hue + 1/3)); 
     g = Math.round(HueToRgb(m1, m2, hue)); 
     b = Math.round(HueToRgb(m1, m2, hue - 1/3)); 
    } 
    return {r: r, g: g, b: b}; 
} 

function HueToRgb(m1, m2, hue) { 
    var v; 
    if (hue < 0) 
     hue += 1; 
    else if (hue > 1) 
     hue -= 1; 

    if (6 * hue < 1) 
     v = m1 + (m2 - m1) * hue * 6; 
    else if (2 * hue < 1) 
     v = m2; 
    else if (3 * hue < 2) 
     v = m1 + (m2 - m1) * (2/3 - hue) * 6; 
    else 
     v = m1; 

    return 255 * v; 
} 

請注意標記爲答案的腳本適用於整數值。由於Farb返回了小數值，所以我做了小小的修改，上面貼出來。

WordPress主題作者： 如果您正在使用Options Framework Theme WordPress的，並希望使用Farbtastic所以您可以使用HSL值，請參閱本Fork by Elihorn，其中包含你需要的文件。在這組文件中，我需要添加「wp_enqueue_style（'farbtastic'）;」在我們排隊劇本的路線上。 farbtastic的.JS文件不需要包含，因爲WP已經擁有它。當然，你也需要排隊Jquery，可能是在functions.php的頂部。

對於這個問題（有重複的問題）的第2部分，請參閱： Return different values from function used multiple times

Answer 1

我決定單獨的功能和重寫他們一點點，使他們正常工作。
結束了與此：

function hsl2rgb(h, s, l) { 
    var m1, m2, hue; 
    var r, g, b 
    s /=100; 
    l /= 100; 
    if (s == 0) 
     r = g = b = (l * 255); 
    else { 
     if (l <= 0.5) 
      m2 = l * (s + 1); 
     else 
      m2 = l + s - l * s; 
     m1 = l * 2 - m2; 
     hue = h/360; 
     r = Math.round(HueToRgb(m1, m2, hue + 1/3)); 
     g = Math.round(HueToRgb(m1, m2, hue)); 
     b = Math.round(HueToRgb(m1, m2, hue - 1/3)); 
    } 
    return {r: r, g: g, b: b}; 
} 

function HueToRgb(m1, m2, hue) { 
    var v; 
    if (hue < 0) 
     hue += 1; 
    else if (hue > 1) 
     hue -= 1; 

    if (6 * hue < 1) 
     v = m1 + (m2 - m1) * hue * 6; 
    else if (2 * hue < 1) 
     v = m2; 
    else if (3 * hue < 2) 
     v = m1 + (m2 - m1) * (2/3 - hue) * 6; 
    else 
     v = m1; 

    return 255 * v; 
} 

這就是所謂的做：

//the HSL values to use 
var h = 30; 
var s = 20; 
var l = 70; 

//call the function into a variable, returns an object rgb = {r:163, g:174, b:196} 
var rgb = hsl2rgb(h, s, l); 

//can now be accessed with rgb.r etc, and remember that the last two are percentages 

這裏有一個DEMONSTRATION

如果您的變量newcolor是一個字符串，你必須做的：

var colorArray = newcolor.split(','), 
    h = colorArray[0], // 0.10434092941291336 
    s = colorArray[1], // 1 
    l = colorArray[2]; // 0.756 

獲得HSL值代入正確的變量。

Answer 2

邁克爾·傑克遜有這種轉換，與其他顏色轉換一起，在JavaScript中，上his site。

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