在线取色器(ColorPicker)的制作方式

Canvas制作取色板
在线效果：查看

附件是源代码，如果需要打开但不能上网，请手动修改Jquery等库

步骤：
1、首先制作一张取色板，作为img标签内容。可以使用PS制作。这里介绍使用html5的canvas来制作
制作后的canvas可以保存为图片。
var pixel = 4;
var canvas = document.getElementById("color_container");
var cxt=canvas.getContext("2d");
for(j=0; j<250; j++){
    if(j%pixel == 0){
        for(i=0; i<360; i++){
            if(i%pixel == 0){
                var s = getHSL(i, j);
                cxt.fillStyle= s;
                cxt.fillRect(i,j,4,4);
            }
        }
    }
}


2、监听img标签的onclick时间，根据鼠标位置换算出点击的颜色值
$("#color_container").click(function(a){
    var target = a.target;
    var parent = target.parentElement;
    var left = parent.offsetLeft;
    var top = parent.offsetTop;
    var i = a.clientX - left;
    var j = a.clientY - top;
    //获取偏移值i、j做后处理
});

3、RGB、HSL、hex(例如#FFFFFF)之间的转换
hex2rgb = function(hex){
    var h = [];
    h[0] = hex.substring(1,3);
    h[1] = hex.substring(3,5);
    h[2] = hex.substring(5,7);
    var r, g, b;
    r = parseInt(h[0], 16);
    g = parseInt(h[1], 16);
    b = parseInt(h[2], 16);
    return [r, g, b];
}

rgb2hex = function(r, g, b){
    r = r.toString(16);
    if(r.length == 1){
        r = "0" + r;
    }
    g = g.toString(16);
    if(g.length == 1){
        g = "0" + g;
    }
    b = b.toString(16);
    if(b.length == 1){
        b = "0" + b;
    }
    return "#" + r + g + b;
}

hsl2rgb = function(h, s, l){
    var r, g, b;
    if(s == 0){
        r = g = b = 255;
    }
    else{
        var q = (l<0.5)?(l * (1.0+s)):(l+s - (l*s));
        var p = (2.0 * l) - q;
        var Hk = h/360.0;
        var T = [];
        T[0] = Hk + 0.3333333;
        T[1] = Hk;
        T[2] = Hk - 0.3333333;
        for(var i=0; i<3; i++){
            if(T[i] < 0) T[i] += 1.0;
            if(T[i] > 1) T[i] -= 1.0;
            if((T[i]*6) < 1){
                T[i] = p + ((q-p)*6.0*T[i]);
            }
            else if((T[i]*2.0) < 1){
                T[i] = q;
            }
            else if((T[i]*3.0) < 2){
                T[i] = p + (q-p) * ((2.0/3.0) - T[i]) * 6.0;
            }
            else{
                T[i] = p;
            }
        }
        r = T[0]*255.0; 
        g = T[1]*255.0; 
        b = T[2]*255.0;
       
        r = Math.round(r);
        b = Math.round(b);
        g = Math.round(g);
       
        r = (r>255)? 255 : ((r<0)?0 : r);
        g = (g>255)? 255 : ((g<0)?0 : g);
        b = (b>255)? 255 : ((b<0)?0 : b);
    }
   
    return [r, g, b];
}

rgb2hsl = function(r, g, b){
    r = r/255;
    g = g/255;
    b = b/255;
    var max, min, diff, r_dist, g_dist, b_dist;
    max = Math.max(Math.max(r, g), b);
    min = Math.min(Math.min(r, g), b);
    diff = max - min;
    var h, s, l;
    l = (max + min)/2;
    if(diff == 0){
        s = 0;
        l = 0;
    }
    else if(l < 0.5){
        s = diff/(max + min);
    }
    else{
        s = diff/(2 - max - min);
    }
    r_dist = (max - r)/diff;
    g_dist = (max - g)/diff;
    b_dist = (max - b)/diff;
    if(r == max){
        h = b_dist - g_dist;
    }
    else if(g == max){
        h = 2 + r_dist - b_dist;
    }
    else {
        h = 4 + g_dist - r_dist;
    }
   
    h = h * 60;
    h = Math.round(h);
    if(h < 0){
        h += 360;
    }
    else if(h >= 360){
        h -= 360;
    }
    return [h, s, l];
}