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

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

实战

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

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

hsla color

1. 创建HSLA的滑块。

1. 给关键的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;
}
监听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()
    })

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

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

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

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

演示效果图

最后

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

参考

• Minimal HSLA Color picker With      Pure Javascript

• fabricjs

• fabric image 过滤器demo

• LICEcap gif图制作