问题
我们经常看到网上的在线工具里有RGB颜色值与十六进制颜色码转换工具，那么这个是怎么实现的呢？
实现
rgb(255, 255, 255) => "#" + "FF" + "FF" + "FF";
"#" + "FF" + "FF" + "FF" => rgb(255, 255, 255);
可以理解为 FF0000 + FF00 + FF，如果左移是基于十六进制计算的，则可以理解为FF << 4，FF << 2，FF。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RGB颜色值与十六进制颜色码转换</title>
<style>input {
width: 100px;
}
.hex-color,.rgb-color {
width: 100px;
height: 100px;
border: 1px solid salmon;
}</style>
</head>
<body>
<h1>kaimo 测试</h1>
<div>
<h3>RGB颜色值转换成十六进制颜色码：</h3>
<div>
<input type="text" name="rgbNum" value="0" maxlength="3">
<input type="text" name="rgbNum" value="0" maxlength="3">
<input type="text" name="rgbNum" value="0" maxlength="3">
<button onclick="hexAdecimalColorCode()">转换</button>
</div>
<div>
<h4>
转换后的十六进制颜色码：<span class="hex-code"></span>
</h4>
<div class="hex-color"></div>
</div>
</div>
<div>
<h3>十六进制颜色码转换成RGB颜色值：</h3>
<div>
<input type="text" name="hexStr" value="#000000">
<button onclick="rgbColorCode()">转换</button>
</div>
<div>
<h4>
转换后的RGB颜色码：<span class="rgb-code"></span>
</h4>
<div class="rgb-color"></div>
</div>
</div>
<script>function hexAdecimalColorCode() {
let rgbNumDom = document.getElementsByName("rgbNum");
let arr = [];
for (let i = 0; i < 3; i++) {
let rn = rgbNumDom[i].value;
if (isNaN(parseInt(rn))) {
return alert("请输入数字");
} else if(parseInt(rn) > 255 || parseInt(rn) < 0) {
return alert("数字在0-255之间");
}
arr.push(rn);
}
if(arr.length !== 3) {
return alert("RGB颜色值不合法");
}
// 核心转换为16进制的操作
let hexStr = (arr[0] << 16 | arr[1] << 8 | arr[2]).toString(16);
// 补零
if(hexStr.length < 6) {
hexStr = `0${new Array((6 - hexStr.length)).join("0")}${hexStr}`;
console.log("进入补零：", hexStr);
}
let hexCode = `#${hexStr}`;
document.querySelector(".hex-code").innerHTML = hexCode;
document.querySelector(".hex-color").style.backgroundColor = hexCode;
return hexCode;
}
function rgbColorCode() {
let hs = document.getElementsByName("hexStr")[0].value;
if (hs.substr(0, 1) === "#"){
hs = hs.substring(1);
if (hs.length !== 3 && hs.length !== 6){
return alert("十六进制颜色码为三位或六位");
} else if (/[^0-9a-f]/i.test(hs)){
return alert("请输入正确的十六进制颜色码");
}
} else {
return alert("十六进制颜色码不合法");
}
let hsArr = hs.toLowerCase().split("");
console.log("hsArr--->", hsArr);
let arr = [];
if(hs.length === 3) {
// 十六进制转为十进制
arr = hsArr.map(el => parseInt((el + el), 16));
console.log("arr--->", arr);
} else {
const [a, b, c, d, e, f] = hsArr;
arr = [a + b, c + d, e + f].map(el => parseInt(el, 16));
console.log("arr--6-->", arr);
}
let rgbCode = `rgb(${arr.join(",")})`;
console.log(rgbCode);
document.querySelector(".rgb-code").innerHTML = rgbCode;
document.querySelector(".rgb-color").style.backgroundColor = rgbCode;
return rgbCode;
}</script>
</body>
</html>
效果如下：
