ヘックスカラーコードを追加するには

Question

jquery-uiを使用してカラーピッカーを作成し、ほぼ完了しました。 しかし、私はどのように16進数のカラーコードを追加することができたのだろうかと思っていた。

HTML

<div id="slider-horizontal"></div> 
<div class="pin"></div> 

jQueryの

$(function() { 
    var box = $('.pin')[0]; 

    $("#slider-horizontal").slider({ 
     orientation: "horizontal", 
     min: 0, 
     max: 360, 
     value: 0, 
     slide: function(event, ui) { 
      box.style.background = 'hsl(' + ui.value + ', 100%, 50%)'; 
     } 
    }); 
}); 

任意の指導をいただければ幸いです。どうもありがとう。

Answer 1

Thisページには、HSLからRGBに変換するための多くの機能があります。この関数を使用すると、その中にRGB値を持ち、背景色とともにスライドイベントで更新されたdivを持つことができます。ここでは、関数の抜粋です：RGBからHEXに行く

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

ははるかに簡単です、そしてthis SO answerから以下の機能を実現することができます。

function componentToHex(c) { 
var hex = c.toString(16); 
return hex.length == 1 ? "0" + hex : hex; 
} 

function rgbToHex(r, g, b) { 
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); 
}