HSL色盘配置工具

马黑黑

hsl颜色配置

色　相（H） 0

饱和度（G） 100

亮　度（B） 50

配置效果：

hsl 尚未配置

rgb ...

马黑黑

操作：

点击左边的色盘，可选色相；

拉动滑竿，可调配色相、饱和度和亮度；

配置好后，需要 hsl 或 rgb 配色结果的，点击右窗格对应的“复制”按钮。

马黑黑

原创代码分享（细节可能需要完善）

1. <style>
   
2. #papa { margin: 50px auto;width: fit-content; display: flex;flex-direction: row; gap: 20px; border-radius: 4px; background: #eee; box-shadow: 1px 1px 2px gray; padding: 20px; position: relative; }
   
3. #hslSet { padding: 12px; width: 260px; }
   
4. #result { padding: 12px; }
   
5. #colorPan { margin: auto; width: 160px; height: 160px; border-radius: 50%; cursor: pointer; }
   
6. #colorResult { width: 300px; height: 200px; }
   
7. #hslColor, #rgbColor, #btnCopy { margin: 10px; }
   
8. #hslColor::before, #rgbColor::before { content: '复制：'; cursor: pointer; }
   
9. #papa p { margin: 0 8px; padding: 6px 0; }
   
10. #papa input[type=range] { cursor: pointer; }
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14.         <fieldset id="hslSet">
    
15.                 <legend> hsl颜色配置 </legend>
    
16.                         <div id="colorPan"></div>
    
17.                         <p><br><label for="H">色　相（H）</label><input id="H" type="range" max="360" min="0" value="0" step="1" /> <span id="sH">0</span></p>
    
18.                         <p><label for="S">饱和度（G）</label><input id="S" type="range" max="100" min="0" value="100" step="1" /> <span id="sS">100</span></p>
    
19.                         <p><label for="L">亮　度（B）</label><input id="L" type="range" max="100" min="0" value="50" step="1" /> <span id="sL">50</span></p>
    
20.         </fieldset>
    
21.         <fieldset id="result">
    
22.                 <legend> 配置效果：</legend>
    
23.                 <div id="colorResult"></div>
    
24.                 <div id="hslColor">hsl 尚未配置</div>
    
25.                 <div id="rgbColor">rgb ...</div>
    
26.         </fieldset>
    
27. </div>
    
28. 
    
29. <script>
    
30. 
    
31. let rangeAr = document.getElementById('hslSet').getElementsByTagName('input'), hslAr = [0,100,50], bgStr = 'conic-gradient(at center center';
    
32. 
    
33. for(j = 0; j < 360; j++) {
    
34.         bgStr += ',hsl(' +j + ', 100%, 50%)';
    
35. }
    
36. bgStr += ')';
    
37. colorPan.style.background = bgStr;
    
38. 
    
39. hslColor.onclick = () => navigator.clipboard.writeText(hslColor.innerText);
    
40. rgbColor.onclick = () => navigator.clipboard.writeText(rgbColor.innerText);
    
41. 
    
42. colorPan.onclick = (e) => {
    
43.         let r = colorPan.offsetWidth / 2;
    
44.         let angle = Math.atan2(e.offsetY - r, e.offsetX - r) * 180 / Math.PI;
    
45.         angle += (e.offsetX < r && e.offsetY < r) ?  450 : 90;
    
46.         hslAr[0] = rangeAr[0].value = angle.toFixed(2);
    
47.         setColor(rangeAr[0]);
    
48. }
    
49. 
    
50. Array.from(rangeAr).forEach((item) => { item.onchange = () => setColor(item); });
    
51. 
    
52. let setColor = (ele) => {
    
53.         ele.id === 'H' ? hslAr[0] = sH.innerText = ele.value : (ele.id=== 'S' ? hslAr[1] = sS.innerText = ele.value : hslAr[2] = sL.innerText = ele.value);
    
54.         colorResult.style.background = hslColor.innerText = 'hsl(' + hslAr[0] +', ' + hslAr[1] + '%, ' + hslAr[2] + '%)';
    
55.         rgbColor.innerText = colorResult.style.background;
    
56. }
    
57. 
    
58. </script>
    

复制代码

红影

这个太好了，可以直接看到 hsl的配色了，还有 rgb的对应值，太棒了

红影

这个可以非常直观地看到各种色相的色彩，还能看到该色彩在不同灰度和亮度下的颜色，简直太实用了

红影

坐在这调着玩了半天，这是一个美丽的色彩世界

马黑黑

红影 发表于 2022-10-1 09:00
坐在这调着玩了半天，这是一个美丽的色彩世界

你可以查看一下代码，并不复杂呢。JS确实厉害。

昨天看了一下，2022最受欢迎的编程语言，JavaScript竟然排第一位。

马黑黑

红影 发表于 2022-10-1 08:58
这个可以非常直观地看到各种色相的色彩，还能看到该色彩在不同灰度和亮度下的颜色，简直太实用了

是吧，感觉比rgb强大

马黑黑

红影 发表于 2022-10-1 08:56
这个太好了，可以直接看到 hsl的配色了，还有 rgb的对应值，太棒了

hsl在rgb的基础上发展而来。hsl无需通过转换就能得到rgb值：通过JS打印元素背景色、前景色，浏览器默认就是rgb颜色体系

红影

马黑黑 发表于 2022-10-1 09:02
你可以查看一下代码，并不复杂呢。JS确实厉害。

昨天看了一下，2022最受欢迎的编程语言，JavaScript竟 ...

JS的确很厉害，虽然我学不会它，但感受到了它的强大

红影

马黑黑 发表于 2022-10-1 09:05
hsl在rgb的基础上发展而来。hsl无需通过转换就能得到rgb值：通过JS打印元素背景色、前景色，浏览器默认就 ...

这个代码里没看出来是怎么转换成rgb的。

红影

马黑黑 发表于 2022-10-1 09:03
是吧，感觉比rgb强大

这个色盘外面再套个带刻度的数字圆盘，以后能直接看到在哪个度数上是什么颜色了

以前最迷惑的就是hsl颜色表示法，现在发现它才是最好的颜色表示法！！！

马黑黑

红影 发表于 2022-10-1 10:35
这个色盘外面再套个带刻度的数字圆盘，以后能直接看到在哪个度数上是什么颜色了

以前最迷惑 ...

一个圆，其实就是一个时钟，即使没有指针，没有标志，一眼就能看出某个点是几点钟方向，不必要多此一举。此外，色相就是度数，用着到那么折腾呀

马黑黑

红影 发表于 2022-10-1 10:31
这个代码里没看出来是怎么转换成rgb的。

它不需要算法去转换，你没看明白。JS和浏览器，默认支持的颜色是rgb，只要让它们显示元素的背景色或前景色，就是rgb和rgba的

马黑黑

红影 发表于 2022-10-1 10:24
JS的确很厉害，虽然我学不会它，但感受到了它的强大

学会受益无穷，很多地方都会用到

红影

马黑黑 发表于 2022-10-1 10:50
一个圆，其实就是一个时钟，即使没有指针，没有标志，一眼就能看出某个点是几点钟方向，不必要多此一举。 ...

主要是我单核的脑袋，看到时钟在上面，才能看到是几点钟啊
呵呵，开个玩笑，这个度盘表达颜色真的太好太好了

红影

马黑黑 发表于 2022-10-1 10:52
它不需要算法去转换，你没看明白。JS和浏览器，默认支持的颜色是rgb，只要让它们显示元素的背景色或前景 ...

原来是这样，怪不得没看出来转换语句，原来根本就不用转换，直接显示就行了

红影

马黑黑 发表于 2022-10-1 10:52
学会受益无穷，很多地方都会用到

我笨啊，我觉得我根本就学不会它

马黑黑

红影 发表于 2022-10-1 11:22
我笨啊，我觉得我根本就学不会它

要跳出固有思维方式才能学会编程

马黑黑

红影 发表于 2022-10-1 11:22
原来是这样，怪不得没看出来转换语句，原来根本就不用转换，直接显示就行了

是的。如果转换，需要一个算法，也不是不可以