用hsl做个色盘

马黑黑

一、理解 hsl

hsl，h = hue，色相，对应于圆的角度，取值范围 0 ~ 360，不要单位。0 和 360 是红色，120 是绿色，240是蓝色，其他颜色介于这三个区间取值，有规律；s，saturation，饱和度，用百分比表示，0% 最大程度加入了灰色，色相所表示的本来颜色无效，是黑色（灰的最大值是黑），100%是色相本色自身，没有加入任何灰色；l，lightness，亮度，0% 代表黑色加入到最大，没有亮度，所以色相自身的本色不显示，是黑色，100% 代表加入最多的白色，色相本色也不能显示，是白色。

h 色相 0 ~ 360
s 饱和度 0% ~ 100%（100%为正常饱和度）
l 亮度 0% ~ 100%（50%为正常亮度）

任何色相，通过调整饱和度或亮度，都能令色相产生变化，饱和度加灰，亮度加黑白。

二、色盘载体

可以使用HTML元素的背景角向渐变，conic-gradient，来实现色盘。元素设置为圆形，将 hsl 色彩表达法的每一个色相角度表现在其中即可。conic-gradient 语法如下：

background: conick-gradient(at angle1 angle2, color1, color2, ... ,colorN);

我们可以写 360 个 color，用 hsl 表示，hsl(0, 100%, 50%), hsl(1, 100%, 50%), ..., hsl(359, 100%, 50%)，色盘就出来了。我们要的都是饱和度和亮度正常的，所以只需改变色相角度。

嗯嗯，写360个色相的颜色，有点复杂哈，所以呢——

三、用 JS 写背景

用一个 for 语句吧，反正就是一次过，效率不效率不用考虑的：

let bgStr = 'conic-gradient(at center center'; //声明一个变量用于记录角向渐变字串

//for循环360次，写360个hsl颜色
for(j = 0; j <360; j ++) {
    bgStr += ',hsl(' + j + ',100%,50%)'; //将每一次循环的 hsl 颜色拼接起来
}
bgStr += ')'; //角向渐变收尾

hslBox.style.background = bgStr; // 给 hslBox 元素加背景色

当然，这些JS代码需要有相应的HTML支持：

<div id="hslBox" style="margin: 50px auto; width: 300px; height: 300px; border-radius: 50%;"></div>

效果可以在楼下查看。

马黑黑

马黑黑

二楼色盘的完整代码：

1. <div id="hslBox" style="margin: 50px auto; width: 300px; height: 300px; border-radius: 50%;"></div>
   
2. 
   
3. <script>
   
4. 
   
5. let bgStr = 'conic-gradient(at center center'; //声明一个变量用于记录角向渐变字串
   
6. 
   
7. //for循环360次，写360个hsl颜色
   
8. for(j = 0; j <360; j ++) {
   
9.     bgStr += ',hsl(' + j + ',100%,50%)'; //将每一次循环的 hsl 颜色拼接起来
   
10. }
    
11. bgStr += ')'; //角向渐变收尾
    
12. 
    
13. hslBox.style.background = bgStr; // 给 hslBox 元素加背景色
    
14. 
    
15. </script>

复制代码

红影

这样一个色盘，360种颜色都有了

红影

hsl是个和聪明的颜色表达方式。
如果把灰度也算进去，颜色真的可以细分成无数种呢。

马黑黑

红影 发表于 2022-9-30 20:52
hsl是个和聪明的颜色表达方式。
如果把灰度也算进去，颜色真的可以细分成无数种呢。

没错。这里仅仅是色相原色展示。

马黑黑

醉美水芙蓉 发表于 2022-9-30 20:42
这个色盘做播放器一定很漂亮的！没有黑黑老师想不到的！又是一个意外惊喜！

做播放器用不着这么多颜色，三四个够了。

马黑黑

红影 发表于 2022-9-30 20:47
这样一个色盘，360种颜色都有了

对的，扩展一下，就是常见的多功能色盘了

小辣椒

马黑黑 发表于 2022-9-30 20:07
二楼色盘的完整代码：

代码的强大，这么几句可以写出360个hsl颜色，黑黑厉害的

红影

马黑黑 发表于 2022-9-30 21:19
没错。这里仅仅是色相原色展示。

过细的颜色，估计人眼都分辨不出来了。

红影

马黑黑 发表于 2022-9-30 21:20
对的，扩展一下，就是常见的多功能色盘了

嗯嗯，很漂亮

马黑黑

红影 发表于 2022-9-30 21:53
嗯嗯，很漂亮

看着耀眼

马黑黑

小辣椒 发表于 2022-9-30 21:51
代码的强大，这么几句可以写出360个hsl颜色，黑黑厉害的

是JS厉害

马黑黑

醉美水芙蓉 发表于 2022-9-30 21:26
这个做旋转的光盘也很漂亮！

之前做过的，就三四种颜色

马黑黑

红影 发表于 2022-9-30 21:53
过细的颜色，估计人眼都分辨不出来了。

但颜色的使用不是为了让人分辨它，而是颜色通过细节搭配，产生美感。

hex颜色表示法（#00ffcc）的缺陷是我们不能确定颜色的亮度、饱和度，我们也不能确定通过什么方式获得某个色系的冷色、暖色，它要参照颜色自身才能找出需要的颜色；

rgb颜色表示法采用计算机体系下的三原色（红绿蓝）组合颜色，有色彩构成知识的可以通过调配红绿蓝的比例来构造自己所需的颜色，这个就很科学了；

hsl基于rgb，但有极大的突破，摈弃三原色组合，采用全新的色相+饱和度+亮度来表示颜色，更为科学，一旦理解了hsl的原理，构造自己所需的任何颜色都是轻而易举的事情。

红影

马黑黑 发表于 2022-9-30 22:16
看着耀眼

看到你做了个配置工具，那个太棒了

红影

马黑黑 发表于 2022-10-1 08:18
但颜色的使用不是为了让人分辨它，而是颜色通过细节搭配，产生美感。

hex颜色表示法（#00ffcc）的缺陷 ...

黑黑的这个解说一目了然，现在对颜色的三种表示方法终于有相对完整的理解了

马黑黑

红影 发表于 2022-10-1 10:22
黑黑的这个解说一目了然，现在对颜色的三种表示方法终于有相对完整的理解了

还有其他的表示方法，比如关键字（red）什么的。当然，web常用的就这四种。