轻量级JavaScript(JS) HSLA颜色选择器

有时候我们需要一个颜色选择器让用户在某个对象上自定义颜色，这里我们实现一个简单的小型的js，交互式的颜色选择器。

实战

1. 创建一个div块，用于实时观察颜色选择器的交互效果

  <div class="swatch" style="background-color: hsla(170, 55%, 55%, 1)">

2. 创建一个可以实时显示当前颜色的块

<h3 class="colorname">hsla color</h3>

3. 创建HSLA的滑块。

<form>
    <h6>HUE</h6>
    <div class="hue"><input name="hue" type="range" min="1" max="300" value="130"></div>

    <h6>SATURATION</h6>
    <div class="satcolor" style="background-color: rgb(255, 29, 25);">
        <div class="sat"><input name="sat" type="range" min="1" max="100" value="100"></div>
    </div>

    <h6>LIGHT</h6>
    <div class="light">
        <input name="light" type="range" min="1" max="100" value="55"></div>

    <h6>ALPHA</h6>
    <div class="alphaimg2">
        <div class="alpha">
            <input name="alpha" type="range" min="0" max="1" step="0.01" value="1">
        </div>
    </div>
</form>

4. 给关键的hsla部分添加css样式

.hue {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}

.sat {
    background-image: linear-gradient(to right, #494949 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 0%);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}

.light {
    background-image: linear-gradient(to right, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}

.alpha {
    background-image: linear-gradient(to right, hsla(66, 31%, 94%, 0.18), white);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}

4. 监听html中颜色滑动条的事件

const colorChange = () => {
    document.querySelector('.colorname').textContent = getHSL()
    const swatch = document.querySelector('.swatch')
    swatch.style.backgroundColor = getHSL()
    document.querySelector('.satcolor').style.backgroundColor = getHSL()
}

let hue = 130    #设置hue的值
let sat = 100    #设置饱和度
let light = 55    #亮度
let alpha = 1    #不透明度

    const hueInput = document.querySelector('input[name=hue]')
    hueInput.addEventListener('input', () => {
        hue = hueInput.value
        colorChange()
    })
    const satInput = document.querySelector('input[name=sat]')
    satInput.addEventListener('input', () => {
        sat = satInput.value
        colorChange()
    })
    const lightInput = document.querySelector('input[name=light]')
    lightInput.addEventListener('input', () => {
        light = lightInput.value
        colorChange()
    })

    const alphaInput = document.querySelector('input[name=alpha]')
    alphaInput.addEventListener('input', () => {
        alpha = alphaInput.value
        colorChange()
    })

5. 额外的hsl与rgba程序的互相转换

/**
 * 转换hsl为rgb
 * 输入的hsl值区间为[0,1]，输出的rgb数组为[0,255]
 *  http://en.wikipedia.org/wiki/HSL_color_spacen 
 * @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{
        var hue2rgb = 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 [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

/**
 * 转换rgb为hsl
 * http://en.wikipedia.org/wiki/HSL_color_space.
 * 输入的 r, g, 和 b 区间为 [0, 255] 
 * 返回的 h, s, 和 l 区间为 [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];
}

6. 最终效果，本文的程序只包含核心部分..
   那个头发是用来测试的，使用imagefilter对图像进行处理，使用fabricjs库。有兴趣的可以看一下。

   
   演示效果图

最后

前端的东西都挺灵活，方案也有很多，感兴趣的可以试一下。这里主要介绍一个简单的js颜色拾取器的实现。

参考

• Minimal HSLA Color picker With Pure JavaScript
• fabricjs
• fabric image 过滤器demo
• LICEcap gif图制作