如何将颜色在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>
其他回答
十六进制到RGB
Const hex2rgb = (hex) => { const r = parseInt(十六进制。切片(1,3)，16) const g = parseInt(十六进制。切片(3,5)，16) const b = parseInt(十六进制。切片(5,7)，16) //返回{r, g, b} //返回一个对象 返回[r, g, b] ｝ console.log (hex2rgb (" # 0080 c0 "))
RGB转十六进制
rgb2hex = (r, g, b) => { Var RGB = (r << 16) | (g << 8) | b //返回'#' + rgb.toString(16) // #80c0 //返回'#' + (0x1000000 + rgb).toString(16).slice(1) // #0080c0 //或使用[padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) 返回'#' + rgb.toString(16)。padStart (0) ｝ Console.log (rgb2hex(0, 128, 192))
此外，如果有人需要在线工具，我已经建立了海克斯到RGB，反之亦然。
这可以用于从计算样式属性中获取颜色:
function rgbToHex(color) {
color = ""+ color;
if (!color || color.indexOf("rgb") < 0) {
return;
}
if (color.charAt(0) == "#") {
return color;
}
var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
r = parseInt(nums[2], 10).toString(16),
g = parseInt(nums[3], 10).toString(16),
b = parseInt(nums[4], 10).toString(16);
return "#"+ (
(r.length == 1 ? "0"+ r : r) +
(g.length == 1 ? "0"+ g : g) +
(b.length == 1 ? "0"+ b : b)
);
}
// not computed
<div style="color: #4d93bc; border: 1px solid red;">...</div>
// computed
<div style="color: rgb(77, 147, 188); border: 1px solid rgb(255, 0, 0);">...</div>
console.log( rgbToHex(color) ) // #4d93bc
console.log( rgbToHex(borderTopColor) ) // #ff0000
裁判:https://github.com/k-gun/so/blob/master/so_util.js
(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))。如果你和我一样对颜色很敏感的话，值得一看。
rgb字符串到十六进制字符串的可读联机程序:
rgb = "rgb(0,128,255)"
hex = '#' + rgb.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2,0)).join('')
返回这里“#0080ff”。
CSS Level 4边注:一般来说，你想要能够将十六进制转换为RGB的原因是alpha通道，在这种情况下，你可以很快用CSS4添加一个十六进制。例如:#FF8800FF或#f80f表示全透明的橙色。
除此之外，下面的代码在一个函数中回答了这两个问题，从另一个函数到另一个函数。这接受一个可选的alpha通道，支持字符串数组格式，解析3,4,6,7个字符的十六进制，和rgb/a完整或部分字符串(百分比定义的rgb/a值除外)没有标志。
(如果支持IE，替换少量的ES6语法)
一句话:
function rgbaHex(c,a,i){return(Array.isArray(c)||(typeof c==='string'&&/,/.test(c)))?((c=(Array.isArray(c)?c:c.replace(/[\sa-z\(\);]+/gi,'').split(',')).map(s=>parseInt(s).toString(16).replace(/^([a-z\d])$/i,'0$1'))),'#'+c[0]+c[1]+c[2]):(c=c.replace(/#/,''),c=c.length%6?c.replace(/(.)(.)(.)/,'$1$1$2$2$3$3'):c,a=parseFloat(a)||null,`rgb${a?'a':''}(${[(i=parseInt(c,16))>>16&255,i>>8&255,i&255,a].join().replace(/,$/,'')})`);}
可读版本:
function rgbaHex(c, a) {
// RGBA to Hex
if (Array.isArray(c) || (typeof c === 'string' && /,/.test(c))) {
c = Array.isArray(c) ? c : c.replace(/[\sa-z\(\);]+/gi, '').split(',');
c = c.map(s => window.parseInt(s).toString(16).replace(/^([a-z\d])$/i, '0$1'));
return '#' + c[0] + c[1] + c[2];
}
// Hex to RGBA
else {
c = c.replace(/#/, '');
c = c.length % 6 ? c.replace(/(.)(.)(.)/, '$1$1$2$2$3$3') : c;
c = window.parseInt(c, 16);
a = window.parseFloat(a) || null;
const r = (c >> 16) & 255;
const g = (c >> 08) & 255;
const b = (c >> 00) & 255;
return `rgb${a ? 'a' : ''}(${[r, g, b, a].join().replace(/,$/,'')})`;
}
}
Usages:
rgbaHex(“# a8f”)
rgbaHex(“# aa88ff”)
rgbaHex(“# A8F”)
rgbaHex(“# AA88FF”)
rgbaHex（'#AA88FF'， 0.5）
rgbaHex(“# a8f”、“0.85”)
/ /等。
rgbaHex（'rgba（170，136，255，0.8）;'）
rgbaHex（'rgba（170，136，255，0.8）'）
rgbaHex（'rgb（170，136，255）'）
rgbaHex（'rg170，136，255'）
rgbaHex(' 170,136,255 ')
rgbaHex 170,136,255,0.8 ([])
rgbaHex ([170136255])
/ /等。
