论坛 › 马黑黑教程专版 › RGB配色器

马黑黑 发表于 2022-5-7 18:16

RGB配色器

本帖最后由 马黑黑 于 2022-5-8 13:23 编辑 <br /><br /><style>
        #mama { margin: auto; display: flex; gap: 20px; width: 640px; }
        #mama fieldset { padding: 10px; width: 300px; }
        #mama input { width: 100px; cursor: pointer; }
        #xiaoguo { flex-grwo: 1; height: 100%; background: rgba(0,0,0,1); }
        #codeTips { margin: 20px auto 0; width: 640px; cursor: pointer; }
        #codeTips::before { content: '代码：'; }
</style>

<div id="mama">
        <fieldset>
                <legend>RGBA颜色配置</legend>
                <p>红色（R）<input id="R" type="range" max="255" step="1" min="0" value="0" /> <span id="sR">0</span></p>
                <p>绿色（G）<input id="G" type="range" max="255" step="1" min="0" value="0" /> <span id="sG">0</span></p>
                <p>蓝色（B）<input id="B" type="range" max="255" step="1" min="0" value="0" /> <span id="sB">0</span></p>
                <p>通道（A）<input id="A" type="range" max="1" min="0" value="1" step="0.05" /> <span id="sA">1</span></p>
        </fieldset>
                <fieldset>
                <legend>效果预览</legend>
                <div id="xiaoguo"></div>
        </fieldset>
</div>
<div id="codeTips">background: rgba(0,0,0,1)</div>

<script>

let xg = document.querySelector('#xiaoguo');
let tips = document.querySelector('#codeTips');
let rangeAr = document.getElementById('mama').getElementsByTagName('input');

Array.from(rangeAr).forEach(function(item){ item.onchange = function(){ setColor(item);} });

tips.onclick = function(){ navigator.clipboard.writeText(this.innerText); }

function setColor(ele){
        let id = '#s' + ele.id;
        document.querySelector(id).innerText = ele.value;
        xg.style.background = `rgba(${rangeAr.value},${rangeAr.value},${rangeAr.value},${rangeAr.value})`;
        tips.innerText = 'background: ' + xg.style.background;
}

</script>

马黑黑 发表于 2022-5-7 18:48

原创代码：

<style>
        #mama { margin: auto; display: flex; gap: 20px; width: 640px; }
        #mama fieldset { padding: 10px; width: 300px; }
        #mama input { width: 100px; }
        #xiaoguo { flex-grwo: 1; height: 100%; background: rgba(0,0,0,1); }
        #codeTips { margin: 20px auto 0; width: 640px; cursor: pointer; }
        #codeTips::before { content: '代码：'; }
</style>

<div id="mama">
        <fieldset>
                <legend>RGBA颜色配置</legend>
                <p>红色（R）<input id="R" type="range" max="255" min="0" value="0" /> <span id="sR">0</span></p>
                <p>绿色（G）<input id="G" type="range" max="255" min="0" value="0" /> <span id="sG">0</span></p>
                <p>蓝色（B）<input id="B" type="range" max="255" min="0" value="0" /> <span id="sB">0</span></p>
                <p>通道（A）<input id="A" type="range" max="1" min="0" value="1" step="0.05" /> <span id="sA">1</span></p>
        </fieldset>
                <fieldset>
                <legend>效果预览</legend>
                <div id="xiaoguo"></div>
        </fieldset>
</div>
<div id="codeTips">background: rgba(0,0,0,1)</div>

<script>

let xg = document.querySelector('#xiaoguo');
let tips = document.querySelector('#codeTips');
let rangeAr = document.getElementById('mama').getElementsByTagName('input');

Array.from(rangeAr).forEach(function(item){ item.onchange = function(){ setColor(item);} });

tips.onclick = function(){ navigator.clipboard.writeText(this.innerText); }

function setColor(ele){
        let id = '#s' + ele.id;
        document.querySelector(id).innerText = ele.value;
        xg.style.background = `rgba(${rangeAr.value},${rangeAr.value},${rangeAr.value},${rangeAr.value})`;
        tips.innerText = 'background: ' + xg.style.background;
}

</script>

马黑黑 发表于 2022-5-7 18:52

本帖最后由 马黑黑 于 2022-5-7 18:56 编辑

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

红影 发表于 2022-5-7 19:37

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

红影 发表于 2022-5-7 19:39

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

红影 发表于 2022-5-7 19:42

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

马黑黑 发表于 2022-5-7 20:20

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

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

马黑黑 发表于 2022-5-7 20:21

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

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

大猫咪 发表于 2022-5-7 22:15

慢慢学习   老黑辛苦{:4_190:}{:4_179:}

马黑黑 发表于 2022-5-7 22:46

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

{:4_180:}

红影 发表于 2022-5-8 11:18

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

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

红影 发表于 2022-5-8 11:18

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

是的，这个非常棒，简直太棒了{:4_199:}{:4_178:}

马黑黑 发表于 2022-5-8 12:18

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

还行的吧

马黑黑 发表于 2022-5-8 12:19

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

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

加林森 发表于 2022-5-8 12:34

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

马黑黑 发表于 2022-5-8 13:22

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

工具性质的东东

加林森 发表于 2022-5-8 13:26

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

嗯嗯。

红影 发表于 2022-5-9 13:09

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

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

红影 发表于 2022-5-9 13:09

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

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

马黑黑 发表于 2022-5-9 13:13

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

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

查看完整版本: RGB配色器