十六进制颜色配色工具

马黑黑

十六进制颜色配色工具

红色 ：

ff

绿色 ：

ff

蓝色 ：

ff

马黑黑

一楼完整代码：

1. <style>
   
2. .pa {
   
3.         margin: 30px auto;
   
4.         width: fit-content;
   
5.         height: fit-content;
   
6. }
   
7. #mydiv {
   
8.         margin-bottom: 20px;
   
9.         width: 600px;
   
10.         height: 300px;
    
11.         border: 1px solid gray;
    
12.         background: #fff;
    
13.         color: #ffff00;
    
14.         font: normal 2em sans-serif;
    
15.         text-shadow: 1px 1px 2px #111;
    
16.         display: grid;
    
17.         place-items: center;
    
18. }
    
19. </style>
    
20. 
    
21. <div class="pa">
    
22.         <div id="mydiv">十六进制颜色配色工具</div>
    
23.         <p>
    
24.                 <label for="rng1">红色 ：</label>
    
25.                 <input id="rng1" class="rng" type="range" value="255" min="0" max="255" />
    
26.                 <output class="op">ff</output>
    
27.         </p>
    
28.         <p>
    
29.                 <label for="rng2">绿色 ：</label>
    
30.                 <input id="rng2" class="rng" type="range" value="255" min="0" max="255" />
    
31.                 <output class="op">ff</output>
    
32.         </p>
    
33.         <p>
    
34.                 <label for="rng3">蓝色 ：</label>
    
35.                 <input id="rng3" class="rng" type="range" value="255" min="0" max="255" />
    
36.                 <output class="op">ff</output>
    
37.         </p>
    
38. </div>
    
39. 
    
40. <script>
    
41. var rngs = document.querySelectorAll('.rng'), ops = document.querySelectorAll('.op');
    
42. add0 = (str) => str.length < 2 ? str.padStart(2,'0') : str;
    
43. rngs.forEach((rng,key) => rng.oninput = () => {
    
44.         ops[key].value = add0(parseInt(rng.value).toString(16));
    
45.         mydiv.textContent = mydiv.style.background = `#${ops[0].value}${ops[1].value}${ops[2].value}`;
    
46. });
    
47. </script>

复制代码

可将代码放入本地HTML文档中然后在本地运行

马黑黑

配色工具道理上能配出 256*256*256=16777216 种颜色

红影

这个好，把它存下来，想要什么颜色，可以在自己电脑上直接调配了

红影

这个js也好简洁，就这么几行代码，就能随意展示16777216 种颜色之多

红影

谢谢黑黑的好帖，这工具帖太实用了

马黑黑

红影 发表于 2024-8-11 13:30
这个js也好简洁，就这么几行代码，就能随意展示16777216 种颜色之多

其实要处理的问题就两个：

一、十进制转十六进制

这里使用巧法：十六进制两位数的最大数是ff，对应十进制的255，所以滑杆 min 值 0、 max 值设置为255，这样每一个滑杆刚好对用红绿蓝的十六进制颜色值。

二、0~9 的数需要前面补零，可以使用字符拼凑法，也可以像工具程序使用的 padStart() 方法。

梦江南

谢谢黑黑老师辛苦了！收藏了。

小辣椒

黑黑太强大了，这个配色工具 很实用的

马黑黑

小辣椒 发表于 2024-8-11 21:35
黑黑太强大了，这个配色工具 很实用的

小辣椒晚上嚎

马黑黑

梦江南 发表于 2024-8-11 16:14
谢谢黑黑老师辛苦了！收藏了。

谢谢

小辣椒

马黑黑 发表于 2024-8-11 21:42
小辣椒晚上嚎

黑黑好~~

红影

马黑黑 发表于 2024-8-11 13:51
其实要处理的问题就两个：

一、十进制转十六进制

这两个问题哪个处理起来都不容易

马黑黑

红影 发表于 2024-8-11 22:08
这两个问题哪个处理起来都不容易

没有呀，很容易的

红影

马黑黑 发表于 2024-8-11 23:20
没有呀，很容易的

就算是滑杆问题解决了，没看出来怎么对应到十六进制颜色的显示的。

马黑黑

红影 发表于 2024-8-11 23:48
就算是滑杆问题解决了，没看出来怎么对应到十六进制颜色的显示的。

滑杆的输入事件，

ops[key].value = add0(parseInt(rng.value).toString(16));

toString(16) 做了16进制转换。代码拆解：parseInt(rng.value).toString(16) 是一个整体，先强制rng滑杆的值value为整数，parseInt(rng.value)，再将之变为16进制，toString(16)；这个整体所得结果再使用函数 add0() 进行补零处理。所得结果给滑杆后面的 output 标签赋值。

最后，将各 output 标签的值拼接起来，就是 33669a 之类的结果。

红影

马黑黑 发表于 2024-8-12 07:26
滑杆的输入事件，

ops[key].value = add0(parseInt(rng.value).toString(16));

嗯嗯，这个挺难理解，我再仔细体会一下。谢谢黑黑