十六进制颜色模式演示
<style>#mydiv {margin: 20px;
width: 600px;
height: 200px;
border: 1px solid tan;
display: grid;
place-items: center;
pointer-events: none;
position: relative;
}
#mydiv::after {
position: absolute;
background: #fff;
content: attr(data-color);
font: normal 14px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
padding: 0 20px;
cursor: pointer;
pointer-events: auto;
}</style>
<p>
十六进制颜色模式，按 RGB 分为三部分，<span style="color:red">RR</span><span style="color:green">GG</span><span style="color:blue">BB</span>，R为红色，G为绿色，B为蓝色。下面给出演示：
</p>
<div id="mydiv" data-color="#ffffff" title="点击复制">
</div>
<p>
<label for="rgRed">红色 ：</label><input id="rgRed" type="range" min="0" max="255" value="255" /> <output id="rgR">ff</output>
</p>
<p>
<label for="rgGreen">绿色 ：</label><input id="rgGreen" type="range" min="0" max="255" value="255" /> <output id="rgG">ff</output>
</p>
<p>
<label for="rgBlue">蓝色 ：</label><input id="rgBlue" type="range" min="0" max="255" value="255" /> <output id="rgB">ff</output>
</p>
<input id="msgout" type="text" style="opacity: 0;" value="#ffffff" />
<script>let ranges = , outputs = ;
let to16 = (num) => {
num = num < 16 ? '0' + num.toString(16) : num.toString(16);
return num;
};
ranges.forEach((item,key) => {
item.onchange = () => {
let bg = `#${to16(parseInt(ranges.value))}${to16(parseInt(ranges.value))}${to16(parseInt(ranges.value))}`;
outputs.value = to16(parseInt(ranges.value));
msgout.value = mydiv.dataset.color = mydiv.style.background = bg;
};
});
mydiv.onclick = () => {
msgout.select();
document.execCommand('copy');
}
</script> 十六进制数字：
0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F
分析一个十六进制颜色： #ff0000
两个红色组，以最高数值 f 组成，ff，也就是红色以最高比例参与到最终颜色的组成中，而两个绿色组、两个蓝色组均为 0，它们对颜色的最终构成不出力，最终， #ff0000 得出的结果就是最纯净的红色。 很好的示范 new Number(ranges.value).toString(16); 这个好神奇啊，十六进制颜色还可以这样在线调出来。又是一个互动帖子，太棒了{:4_199:} 马黑黑 发表于 2023-8-1 08:11
十六进制数字：
0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F
刚才跟着去看了看最纯净的红#ff0000，然后随手调一下，显示#ffcc，意思后面4个都是c吧。
那纯净的红#ff0000也可以写成#ff00吧。 这个有意思，随意让其中2个不动，然后感受只调整一个时候的变化。
还可以看上面的数字字母变化。刚知道它们的每一个是从0到f16个中取2个的排列，也是就16的平方，有256种变化，单一的就这么多变化，三色都算上就是16的6次方，天啊，太多的变化了，非常惊奇{:4_181:} 那么多看着很像的颜色，原来是不同的。想起世博会中国馆选红色时的事了，那么多红在我眼里都差不多，除非色差特别明显的，可是最后为了颜色却开了那么久的会。体会完这个帖子，原来颜色真的可以分成千上万种，（去搜了一下，是16777216种颜色），用红绿蓝竟然能组合出这么多颜色。
以后没事可以在这个帖子里学习分辨相近颜色了，绝对可以锻炼眼力呢{:4_178:} 起个网名好难 发表于 2023-8-1 09:07
new Number(ranges.value).toString(16);
toString(16) 没啥问题，这里要处理的是补零吧，早上做的匆忙，to16 函数有点毛病，现在已更正 红影 发表于 2023-8-1 10:43
刚才跟着去看了看最纯净的红#ff0000，然后随手调一下，显示#ffcc，意思后面4个都是c吧。
那纯净的红#ff0 ...
十六进制颜色有缩写的情况，最常见的是三位数的缩写。 起个网名好难 发表于 2023-8-1 09:05
很好的示范
请多指教 红影 发表于 2023-8-1 10:39
这个好神奇啊，十六进制颜色还可以这样在线调出来。又是一个互动帖子，太棒了
都是基于计算所谓的三原色（rgb），帮助大家理解这个原理是本帖的目的 红影 发表于 2023-8-1 11:00
那么多看着很像的颜色，原来是不同的。想起世博会中国馆选红色时的事了，那么多红在我眼里都差不多，除非色 ...
一大片纯色会影响眼睛，注意用眼卫生 本帖最后由 马黑黑 于 2023-8-1 11:49 编辑
红影 发表于 2023-8-1 11:00
那么多看着很像的颜色，原来是不同的。想起世博会中国馆选红色时的事了，那么多红在我眼里都差不多，除非色 ...
就是256的三次幂 红影 发表于 2023-8-1 10:55
这个有意思，随意让其中2个不动，然后感受只调整一个时候的变化。
还可以看上面的数字字母变化。刚知道它 ...
颜色有相近的，一般地，相近的部分，会规划出一个“安全色”，这是早期制定的，基于当时的显示渲染能力，现在不论了，安全色的概念已经被淡化 红影 发表于 2023-8-1 10:39
这个好神奇啊，十六进制颜色还可以这样在线调出来。又是一个互动帖子，太棒了
早上办正事前做的有点小问题，补零的条件没做好，现在已修正，值不值是否合理。另外，现在可以复制调制出来的颜色值了。 马黑黑 发表于 2023-8-1 11:43
toString(16) 没啥问题，这里要处理的是补零吧，早上做的匆忙，to16 函数有点毛病，现在已更正
是的，我没考虑到{:5_102:} 起个网名好难 发表于 2023-8-1 12:19
是的，我没考虑到
调试过程中会发现的 红影 发表于 2023-8-1 10:43
刚才跟着去看了看最纯净的红#ff0000，然后随手调一下，显示#ffcc，意思后面4个都是c吧。
那纯净的红#ff0 ...
纯净红色 可以是#ff0000 也可写作 #f00 马黑黑 发表于 2023-8-1 11:43
toString(16) 没啥问题，这里要处理的是补零吧，早上做的匆忙，to16 函数有点毛病，现在已更正
有理无理先加个0再说{:5_106:}
return ('0' + parseInt(num).toString(16)).slice(-2);
num 直接用取得的 range 的值