如何将颜色在RGB格式转换为十六进制格式，反之亦然?
例如，将'#0080C0'转换为(0,128,192)。
当前回答
HTML converer :)
<!DOCTYPE html>
<html>
<body>
<p id="res"></p>
<script>
function hexToRgb(hex) {
var res = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return "(" + parseInt(res[1], 16) + "," + parseInt(res[2], 16) + "," + parseInt(res[3], 16) + ")";
};
document.getElementById("res").innerHTML = hexToRgb('#0080C0');
</script>
</body>
</html>
其他回答
这段代码接受#fff和#ffffff变量和不透明度。
function hex2rgb(hex, opacity) {
var h=hex.replace('#', '');
h = h.match(new RegExp('(.{'+h.length/3+'})', 'g'));
for(var i=0; i<h.length; i++)
h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);
if (typeof opacity != 'undefined') h.push(opacity);
return 'rgba('+h.join(',')+')';
}
(2017) SIMPLE ES6组合箭头函数
我忍不住要把这个分享给那些可能正在使用ES6编写一些现代函数/复合js的人。下面是我在一个颜色模块中使用的一些光滑的单行程序，它为数据可视化做颜色插值。
注意，这根本不处理alpha通道。
const arrayToRGBString = rgb => `rgb(${rgb.join(',')})`;
const hexToRGBArray = hex => hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
const rgbArrayToHex = rgb => `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
const rgbStringToArray = rgb => rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).splice(1, 3)
.map(v => Number(v));
const rgbStringToHex = rgb => rgbArrayToHex(rgbStringToArray(rgb));
顺便说一句，如果你喜欢这种风格/语法，我写了一个全彩色模块(modern-color)，你可以从npm中获取。我这样做，所以我可以使用道具getter转换和解析几乎任何东西(Color.parse(anything))。如果你和我一样对颜色很敏感的话，值得一看。
我假设您指的是html风格的十六进制符号，即#rrggbb。你的代码几乎是正确的，只是顺序颠倒了。它应该是:
var decColor = red * 65536 + green * 256 + blue;
此外，使用位移位可能会让它更容易阅读:
var decColor = (red << 16) + (green << 8) + blue;
我为RGB和十六进制颜色做了一个小的Javascript颜色类，这个类还包括RGB和十六进制验证函数。我将代码作为一个片段添加到这个答案中。
var colorClass = function() { this.validateRgb = function(color) { return typeof color === 'object' && color.length === 3 && Math.min.apply(null, color) >= 0 && Math.max.apply(null, color) <= 255; }; this.validateHex = function(color) { return color.match(/^\#?(([0-9a-f]{3}){1,2})$/i); }; this.hexToRgb = function(color) { var hex = color.replace(/^\#/, ''); var length = hex.length; return [ parseInt(length === 6 ? hex['0'] + hex['1'] : hex['0'] + hex['0'], 16), parseInt(length === 6 ? hex['2'] + hex['3'] : hex['1'] + hex['1'], 16), parseInt(length === 6 ? hex['4'] + hex['5'] : hex['2'] + hex['2'], 16) ]; }; this.rgbToHex = function(color) { return '#' + ('0' + parseInt(color['0'], 10).toString(16)).slice(-2) + ('0' + parseInt(color['1'], 10).toString(16)).slice(-2) + ('0' + parseInt(color['2'], 10).toString(16)).slice(-2); }; }; var colors = new colorClass(); console.log(colors.hexToRgb('#FFFFFF'));// [255, 255, 255] console.log(colors.rgbToHex([255, 255, 255]));// #FFFFFF
@ Tim，补充一下你的答案(把这个放进评论里有点尴尬)。
正如所写的，我发现rgbToHex函数返回一个包含元素的字符串，它要求r, g, b值落在0-255的范围内。
我相信这对大多数人来说是显而易见的，但我花了两个小时才弄明白，到那时，原来的方法已经膨胀到7行，直到我意识到我的问题在其他地方。因此，为了节省其他人的时间和麻烦，下面是我稍微修改过的代码，它检查了先决条件，并删除了字符串中无关的部分。
function rgbToHex(r, g, b) {
if(r < 0 || r > 255) alert("r is out of bounds; "+r);
if(g < 0 || g > 255) alert("g is out of bounds; "+g);
if(b < 0 || b > 255) alert("b is out of bounds; "+b);
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}
