RGB颜色值与十六进制颜色码怎么相互转换？
Posted 凯小默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了RGB颜色值与十六进制颜色码怎么相互转换？相关的知识，希望对你有一定的参考价值。
问题
我们经常看到网上的在线工具里有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>
效果如下：
以上是关于RGB颜色值与十六进制颜色码怎么相互转换？的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript之颜色值相互转换十六进制正则rgbtoStringslicetoUpperCasesplitfiltermapparseInt
JavaScript之颜色值相互转换十六进制正则rgbtoStringslicetoUpperCasesplitfiltermapparseInt