十六进制颜色模式演示

马黑黑

十六进制颜色模式，按 RGB 分为三部分，RRGGBB，R为红色，G为绿色，B为蓝色。下面给出演示：

红色 ：

ff

绿色 ：

ff

蓝色 ：

ff

马黑黑

十六进制数字：

0，1，2，3，4，5，6，7，8，9，A，B，C，D，E，F

分析一个十六进制颜色： #ff0000

两个红色组，以最高数值 f 组成，ff，也就是红色以最高比例参与到最终颜色的组成中，而两个绿色组、两个蓝色组均为 0，它们对颜色的最终构成不出力，最终， #ff0000 得出的结果就是最纯净的红色。

起个网名好难

很好的示范

起个网名好难

new Number(ranges[key].value).toString(16);

红影

这个好神奇啊，十六进制颜色还可以这样在线调出来。又是一个互动帖子，太棒了

红影

马黑黑 发表于 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次方，天啊，太多的变化了，非常惊奇

红影

那么多看着很像的颜色，原来是不同的。想起世博会中国馆选红色时的事了，那么多红在我眼里都差不多，除非色差特别明显的，可是最后为了颜色却开了那么久的会。体会完这个帖子，原来颜色真的可以分成千上万种，（去搜了一下，是16777216种颜色），用红绿蓝竟然能组合出这么多颜色。
以后没事可以在这个帖子里学习分辨相近颜色了，绝对可以锻炼眼力呢

马黑黑

起个网名好难 发表于 2023-8-1 09:07
new Number(ranges[key].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:00
那么多看着很像的颜色，原来是不同的。想起世博会中国馆选红色时的事了，那么多红在我眼里都差不多，除非色 ...

就是256的三次幂

马黑黑

红影 发表于 2023-8-1 10:55
这个有意思，随意让其中2个不动，然后感受只调整一个时候的变化。
还可以看上面的数字字母变化。刚知道它 ...

颜色有相近的，一般地，相近的部分，会规划出一个“安全色”，这是早期制定的，基于当时的显示渲染能力，现在不论了，安全色的概念已经被淡化

马黑黑

红影 发表于 2023-8-1 10:39
这个好神奇啊，十六进制颜色还可以这样在线调出来。又是一个互动帖子，太棒了

早上办正事前做的有点小问题，补零的条件没做好，现在已修正，值不值是否合理。另外，现在可以复制调制出来的颜色值了。

起个网名好难

马黑黑 发表于 2023-8-1 11:43
toString(16) 没啥问题，这里要处理的是补零吧，早上做的匆忙，to16 函数有点毛病，现在已更正

是的，我没考虑到

马黑黑

起个网名好难 发表于 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再说

return ('0' + parseInt(num).toString(16)).slice(-2);

num 直接用取得的 range 的值