十六进制颜色配色工具
本帖最后由 马黑黑 于 2024-8-11 19:29 编辑 <br /><br /><style>.pa {
margin: 30px auto;
width: fit-content;
height: fit-content;
}
#mydiv {
margin-bottom: 20px;
width: 600px;
height: 300px;
border: 1px solid gray;
background: #fff;
color: #ffff00;
font: normal 2em sans-serif;
text-shadow: 1px 1px 2px #111;
display: grid;
place-items: center;
}
</style>
<div class="pa">
<div id="mydiv">十六进制颜色配色工具</div>
<p>
<label for="rng1">红色 ：</label>
<input id="rng1" class="rng" type="range" value="255" min="0" max="255" />
<output class="op">ff</output>
</p>
<p>
<label for="rng2">绿色 ：</label>
<input id="rng2" class="rng" type="range" value="255" min="0" max="255" />
<output class="op">ff</output>
</p>
<p>
<label for="rng3">蓝色 ：</label>
<input id="rng3" class="rng" type="range" value="255" min="0" max="255" />
<output class="op">ff</output>
</p>
</div>
<script>
var rngs = document.querySelectorAll('.rng'), ops = document.querySelectorAll('.op');
add0 = (str) => str.length < 2 ? str.padStart(2,'0') : str;
rngs.forEach((rng,key) => rng.oninput = () => {
ops.value = add0(parseInt(rng.value).toString(16));
mydiv.textContent = mydiv.style.background = `#${ops.value}${ops.value}${ops.value}`;
});
</script>
本帖最后由 马黑黑 于 2024-8-11 19:29 编辑
一楼完整代码：
<style>
.pa {
margin: 30px auto;
width: fit-content;
height: fit-content;
}
#mydiv {
margin-bottom: 20px;
width: 600px;
height: 300px;
border: 1px solid gray;
background: #fff;
color: #ffff00;
font: normal 2em sans-serif;
text-shadow: 1px 1px 2px #111;
display: grid;
place-items: center;
}
</style>
<div class="pa">
<div id="mydiv">十六进制颜色配色工具</div>
<p>
<label for="rng1">红色 ：</label>
<input id="rng1" class="rng" type="range" value="255" min="0" max="255" />
<output class="op">ff</output>
</p>
<p>
<label for="rng2">绿色 ：</label>
<input id="rng2" class="rng" type="range" value="255" min="0" max="255" />
<output class="op">ff</output>
</p>
<p>
<label for="rng3">蓝色 ：</label>
<input id="rng3" class="rng" type="range" value="255" min="0" max="255" />
<output class="op">ff</output>
</p>
</div>
<script>
var rngs = document.querySelectorAll('.rng'), ops = document.querySelectorAll('.op');
add0 = (str) => str.length < 2 ? str.padStart(2,'0') : str;
rngs.forEach((rng,key) => rng.oninput = () => {
ops.value = add0(parseInt(rng.value).toString(16));
mydiv.textContent = mydiv.style.background = `#${ops.value}${ops.value}${ops.value}`;
});
</script>可将代码放入本地HTML文档中然后在本地运行
配色工具道理上能配出 256*256*256=16777216 种颜色 这个好，把它存下来，想要什么颜色，可以在自己电脑上直接调配了{:4_199:} 这个js也好简洁，就这么几行代码，就能随意展示16777216 种颜色之多{:4_199:} 谢谢黑黑的好帖，这工具帖太实用了{:4_187:} 红影 发表于 2024-8-11 13:30
这个js也好简洁，就这么几行代码，就能随意展示16777216 种颜色之多
其实要处理的问题就两个：
一、十进制转十六进制
这里使用巧法：十六进制两位数的最大数是ff，对应十进制的255，所以滑杆 min 值 0、 max 值设置为255，这样每一个滑杆刚好对用红绿蓝的十六进制颜色值。
二、0~9 的数需要前面补零，可以使用字符拼凑法，也可以像工具程序使用的 padStart() 方法。 谢谢黑黑老师辛苦了！收藏了。 黑黑太强大了，这个配色工具 很实用的{:4_178:} 小辣椒 发表于 2024-8-11 21:35
黑黑太强大了，这个配色工具 很实用的
小辣椒晚上嚎 梦江南 发表于 2024-8-11 16:14
谢谢黑黑老师辛苦了！收藏了。
谢谢{:4_190:} 马黑黑 发表于 2024-8-11 21:42
小辣椒晚上嚎
黑黑好~~{:4_180:} 马黑黑 发表于 2024-8-11 13:51
其实要处理的问题就两个：
一、十进制转十六进制
这两个问题哪个处理起来都不容易{:4_187:} 红影 发表于 2024-8-11 22:08
这两个问题哪个处理起来都不容易
没有呀，很容易的 马黑黑 发表于 2024-8-11 23:20
没有呀，很容易的
就算是滑杆问题解决了，没看出来怎么对应到十六进制颜色的显示的。 本帖最后由 马黑黑 于 2024-8-12 07:28 编辑
红影 发表于 2024-8-11 23:48
就算是滑杆问题解决了，没看出来怎么对应到十六进制颜色的显示的。
滑杆的输入事件，
ops.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.value = add0(parseInt(rng.value).toString(16));
嗯嗯，这个挺难理解，我再仔细体会一下。谢谢黑黑{:4_187:}
页:
[1]