HSL色盘配置工具
本帖最后由 马黑黑 于 2022-10-1 23:28 编辑 <br /><br /><!DOCTYPE html><html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HSL色盘</title>
</head>
<body>
<style>
#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; }
#hslSet { width: 260px; }
#result { width: auto; }
#colorPan { margin: auto; width: 160px; height: 160px; border-radius: 50%; cursor: pointer; }
#colorResult { width: 300px; height: 200px; margin: 10px 16px; }
#hslColor, #rgbColor, #btnCopy { margin: 10px; }
#hslColor::before, #rgbColor::before { content: '复制：'; cursor: pointer; }
#papa p { margin: 0 8px; padding: 6px 0; }
#papa input { cursor: pointer; }
#icopy { position: absolute; padding: 2px 8px; text-align: center; border: none; outline: none; opacity: 0;}
</style>
<div id="papa">
<fieldset id="hslSet">
<legend>hsl颜色配置</legend>
<div id="colorPan"></div>
<p><label for="H">色 相（H）</label><input id="H" type="range" max="360" min="0" value="0" step="1" /> <span id="sH">0</span></p>
<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>
<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>
</fieldset>
<fieldset id="result">
<legend>配置效果：</legend>
<div id="colorResult"></div>
<div id="hslColor">hsl 尚未配置</div>
<div id="rgbColor">rgb ...</div>
<input id="icopy" type="text" value="" />
</fieldset>
</div>
<script>
let rangeAr = document.getElementById('hslSet').getElementsByTagName('input'), hslAr = , bgStr = 'conic-gradient(at center center';
for(j = 0; j < 360; j++) {
bgStr += ',hsl(' +j + ', 100%, 50%)';
}
bgStr += ')';
colorPan.style.background = bgStr;
hslColor.onclick = () => copyText(hslColor);
rgbColor.onclick = () => copyText(rgbColor);
colorPan.onclick = (e) => {
let r = colorPan.offsetWidth / 2;
let angle = Math.atan2(e.offsetY - r, e.offsetX - r) * 180 / Math.PI;
angle += (e.offsetX < r && e.offsetY < r) ?450 : 90;
hslAr = rangeAr.value = angle.toFixed(2);
setColor(rangeAr);
}
Array.from(rangeAr).forEach((item) => { item.onchange = () => setColor(item); });
let setColor = (ele) => {
ele.id === 'H' ? hslAr = sH.innerText = ele.value : (ele.id=== 'S' ? hslAr = sS.innerText = ele.value : hslAr = sL.innerText = ele.value);
colorResult.style.background = hslColor.innerText = 'hsl(' + hslAr +', ' + hslAr + '%, ' + hslAr + '%)';
rgbColor.innerText = colorResult.style.background;
}
function copyText(ele) {
icopy.value = ele.innerText;
icopy.select();
document.execCommand('copy');
icopy.value = '复制成功';
icopy.blur();
icopy.style.opacity = '1';
icopy.style.left = ele.offsetLeft + 40 + 'px';
icopy.style.top = ele.offsetTop + 'px';
setTimeout('icopy.style.opacity = "0"', 1000);
}
</script>
</body>
</html>
操作：
点击左边的色盘，可选色相；
拉动滑竿，可调配色相、饱和度和亮度；
配置好后，需要 hsl 或 rgb 配色结果的，点击右窗格对应的“复制”按钮。 原创代码分享（细节可能需要完善）<style>
#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; }
#hslSet { padding: 12px; width: 260px; }
#result { padding: 12px; }
#colorPan { margin: auto; width: 160px; height: 160px; border-radius: 50%; cursor: pointer; }
#colorResult { width: 300px; height: 200px; }
#hslColor, #rgbColor, #btnCopy { margin: 10px; }
#hslColor::before, #rgbColor::before { content: '复制：'; cursor: pointer; }
#papa p { margin: 0 8px; padding: 6px 0; }
#papa input { cursor: pointer; }
</style>
<div id="papa">
<fieldset id="hslSet">
<legend> hsl颜色配置 </legend>
<div id="colorPan"></div>
<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>
<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>
<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>
</fieldset>
<fieldset id="result">
<legend> 配置效果：</legend>
<div id="colorResult"></div>
<div id="hslColor">hsl 尚未配置</div>
<div id="rgbColor">rgb ...</div>
</fieldset>
</div>
<script>
let rangeAr = document.getElementById('hslSet').getElementsByTagName('input'), hslAr = , bgStr = 'conic-gradient(at center center';
for(j = 0; j < 360; j++) {
bgStr += ',hsl(' +j + ', 100%, 50%)';
}
bgStr += ')';
colorPan.style.background = bgStr;
hslColor.onclick = () => navigator.clipboard.writeText(hslColor.innerText);
rgbColor.onclick = () => navigator.clipboard.writeText(rgbColor.innerText);
colorPan.onclick = (e) => {
let r = colorPan.offsetWidth / 2;
let angle = Math.atan2(e.offsetY - r, e.offsetX - r) * 180 / Math.PI;
angle += (e.offsetX < r && e.offsetY < r) ?450 : 90;
hslAr = rangeAr.value = angle.toFixed(2);
setColor(rangeAr);
}
Array.from(rangeAr).forEach((item) => { item.onchange = () => setColor(item); });
let setColor = (ele) => {
ele.id === 'H' ? hslAr = sH.innerText = ele.value : (ele.id=== 'S' ? hslAr = sS.innerText = ele.value : hslAr = sL.innerText = ele.value);
colorResult.style.background = hslColor.innerText = 'hsl(' + hslAr +', ' + hslAr + '%, ' + hslAr + '%)';
rgbColor.innerText = colorResult.style.background;
}
</script>
这个太好了，可以直接看到 hsl的配色了，还有 rgb的对应值，太棒了{:4_199:} 这个可以非常直观地看到各种色相的色彩，还能看到该色彩在不同灰度和亮度下的颜色，简直太实用了{:4_199:} 坐在这调着玩了半天，这是一个美丽的色彩世界{:4_199:} 红影 发表于 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的确很厉害，虽然我学不会它，但感受到了它的强大{:4_187:} 马黑黑 发表于 2022-10-1 09:05
hsl在rgb的基础上发展而来。hsl无需通过转换就能得到rgb值：通过JS打印元素背景色、前景色，浏览器默认就 ...
这个代码里没看出来是怎么转换成rgb的。 马黑黑 发表于 2022-10-1 09:03
是吧，感觉比rgb强大
这个色盘外面再套个带刻度的数字圆盘，以后能直接看到在哪个度数上是什么颜色了{:4_173:}
以前最迷惑的就是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
一个圆，其实就是一个时钟，即使没有指针，没有标志，一眼就能看出某个点是几点钟方向，不必要多此一举。 ...
主要是我单核的脑袋，看到时钟在上面，才能看到是几点钟啊{:4_170:}
呵呵，开个玩笑，这个度盘表达颜色真的太好太好了{:4_199:} 马黑黑 发表于 2022-10-1 10:52
它不需要算法去转换，你没看明白。JS和浏览器，默认支持的颜色是rgb，只要让它们显示元素的背景色或前景 ...
原来是这样，怪不得没看出来转换语句，原来根本就不用转换，直接显示就行了{:4_187:} 马黑黑 发表于 2022-10-1 10:52
学会受益无穷，很多地方都会用到
我笨啊，我觉得我根本就学不会它{:4_173:} 红影 发表于 2022-10-1 11:22
我笨啊，我觉得我根本就学不会它
要跳出固有思维方式才能学会编程 红影 发表于 2022-10-1 11:22
原来是这样，怪不得没看出来转换语句，原来根本就不用转换，直接显示就行了
是的。如果转换，需要一个算法，也不是不可以