RGB配色器

马黑黑

RGBA颜色配置

红色（R） 0

绿色（G） 0

蓝色（B） 0

通道（A） 1

效果预览

background: rgba(0,0,0,1)

马黑黑

原创代码：

1. <style>
   
2.         #mama { margin: auto; display: flex; gap: 20px; width: 640px; }
   
3.         #mama fieldset { padding: 10px; width: 300px; }
   
4.         #mama input { width: 100px; }
   
5.         #xiaoguo { flex-grwo: 1; height: 100%; background: rgba(0,0,0,1); }
   
6.         #codeTips { margin: 20px auto 0; width: 640px; cursor: pointer; }
   
7.         #codeTips::before { content: '代码：'; }
   
8. </style>
   
9. 
   
10. <div id="mama">
    
11.         <fieldset>
    
12.                 <legend>RGBA颜色配置</legend>
    
13.                 <p>红色（R）<input id="R" type="range" max="255" min="0" value="0" /> <span id="sR">0</span></p>
    
14.                 <p>绿色（G）<input id="G" type="range" max="255" min="0" value="0" /> <span id="sG">0</span></p>
    
15.                 <p>蓝色（B）<input id="B" type="range" max="255" min="0" value="0" /> <span id="sB">0</span></p>
    
16.                 <p>通道（A）<input id="A" type="range" max="1" min="0" value="1" step="0.05" /> <span id="sA">1</span></p>
    
17.         </fieldset>
    
18.                 <fieldset>
    
19.                 <legend>效果预览</legend>
    
20.                 <div id="xiaoguo"></div>
    
21.         </fieldset>
    
22. </div>
    
23. <div id="codeTips">background: rgba(0,0,0,1)</div>
    
24. 
    
25. <script>
    
26. 
    
27. let xg = document.querySelector('#xiaoguo');
    
28. let tips = document.querySelector('#codeTips');
    
29. let rangeAr = document.getElementById('mama').getElementsByTagName('input');
    
30. 
    
31. Array.from(rangeAr).forEach(function(item){ item.onchange = function(){ setColor(item);} });
    
32. 
    
33. tips.onclick = function(){ navigator.clipboard.writeText(this.innerText); }
    
34. 
    
35. function setColor(ele){
    
36.         let id = '#s' + ele.id;
    
37.         document.querySelector(id).innerText = ele.value;
    
38.         xg.style.background = `rgba(${rangeAr[0].value},${rangeAr[1].value},${rangeAr[2].value},${rangeAr[3].value})`;
    
39.         tips.innerText = 'background: ' + xg.style.background;
    
40. }
    
41. 
    
42. </script>

复制代码

马黑黑

我以为，这是迄今为止JS代码量最少的RGB配色程序，虽然我写完后没有去做比较。而且，功能还算完整的，你甚至可以点击“代码”处获得配置代码，然后粘贴到你需要的地方

红影

这个厉害了，可以非常直观地看到rgb配色的色彩变化，还能看到透明度对色彩的影响，非常棒

红影

这个太好了，不知道rgb颜色的时候可以跑这个帖子里查了。

红影

输入颜色数字，可以看到对应色。发现可以用左右键细调呢，这样可以精确放入数值看颜色了。
通道那里会不会受论坛底板色的影响？若是在纯白上测试可能不一样吧？

马黑黑

红影 发表于 2022-5-7 19:42
输入颜色数字，可以看到对应色。发现可以用左右键细调呢，这样可以精确放入数值看颜色了。
通道那里会不会 ...

alpha通道如果值小于1，则可以透过去看到底色，换句话说，底色会影响有透明度的颜色

马黑黑

红影 发表于 2022-5-7 19:37
这个厉害了，可以非常直观地看到rgb配色的色彩变化，还能看到透明度对色彩的影响，非常棒

可以用用吧？代码很精致，购销高效，可以存下来

大猫咪

慢慢学习   老黑辛苦    

马黑黑

大猫咪 发表于 2022-5-7 22:15
慢慢学习   老黑辛苦

红影

马黑黑 发表于 2022-5-7 20:20
alpha通道如果值小于1，则可以透过去看到底色，换句话说，底色会影响有透明度的颜色

嗯嗯，明白了，那么在纯黑或纯白上看应该会更准确的吧。

红影

马黑黑 发表于 2022-5-7 20:21
可以用用吧？代码很精致，购销高效，可以存下来

是的，这个非常棒，简直太棒了

马黑黑

红影 发表于 2022-5-8 11:18
是的，这个非常棒，简直太棒了

还行的吧

马黑黑

红影 发表于 2022-5-8 11:18
嗯嗯，明白了，那么在纯黑或纯白上看应该会更准确的吧。

很多做渐变演示的都是用纯白的

加林森

这个制作真太漂亮啦，可以随意换颜色，真实用！谢谢老黑拉！

马黑黑

加林森 发表于 2022-5-8 12:34
这个制作真太漂亮啦，可以随意换颜色，真实用！谢谢老黑拉！

工具性质的东东

加林森

马黑黑 发表于 2022-5-8 13:22
工具性质的东东

嗯嗯。

红影

马黑黑 发表于 2022-5-8 12:18
还行的吧

我经常不知道rgb的颜色，只是看到的都是数字。有这个就能变成可见的颜色了呢，真好。

红影

马黑黑 发表于 2022-5-8 12:19
很多做渐变演示的都是用纯白的

透明度也是一样的吧，纯白的底看得更准确呢。

马黑黑

红影 发表于 2022-5-9 13:09
透明度也是一样的吧，纯白的底看得更准确呢。

是的，这与人对可见光的接受习惯有关