有时候我们需要一个颜色选择器让用户在某个对象上自定义颜色，这里我们实现一个简单的小型的js，交互式的颜色选择器。
实战
- 创建一个div块，用于实时观察颜色选择器的交互效果
<div class="swatch" style="background-color: hsla(170, 55%, 55%, 1)">
- 创建一个可以实时显示当前颜色的块
<h3 class="colorname">hsla color</h3>
- 创建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>
- 给关键的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()
})
- 额外的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];
}
-
最终效果，本文的程序只包含核心部分..
那个头发是用来测试的，使用imagefilter对图像进行处理，使用fabricjs库。有兴趣的可以看一下。
演示效果图
最后
前端的东西都挺灵活，方案也有很多，感兴趣的可以试一下。这里主要介绍一个简单的js颜色拾取器的实现。
