如何将颜色在RGB格式转换为十六进制格式,反之亦然?
例如,将'#0080C0'转换为(0,128,192)。
如何将颜色在RGB格式转换为十六进制格式,反之亦然?
例如,将'#0080C0'转换为(0,128,192)。
当前回答
一个简单的答案,将RGB转换为十六进制。这里颜色通道的值被限定在0到255之间。
function RGBToHex(r = 0, g = 0, b = 0) {
// clamp and convert to hex
let hr = Math.max(0, Math.min(255, Math.round(r))).toString(16);
let hg = Math.max(0, Math.min(255, Math.round(g))).toString(16);
let hb = Math.max(0, Math.min(255, Math.round(b))).toString(16);
return "#" +
(hr.length<2?"0":"") + hr +
(hg.length<2?"0":"") + hg +
(hb.length<2?"0":"") + hb;
}
其他回答
对于直接从jQuery转换,您可以尝试:
function rgbToHex(color) {
var bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
}
rgbToHex($('.col-tab-bar .col-tab span').css('color'))
以下是我的看法:
function rgbToHex(red, green, blue) {
const rgb = (red << 16) | (green << 8) | (blue << 0);
return '#' + (0x1000000 + rgb).toString(16).slice(1);
}
function hexToRgb(hex) {
const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
if (normal) return normal.slice(1).map(e => parseInt(e, 16));
const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));
return null;
}
注意:rgbToHex的两个版本都期望r, g和b为整数值,所以如果你有非整数值,你需要自己做四舍五入。
下面将做RGB到十六进制的转换,并添加任何所需的零填充:
函数componentToHex(c) { var hex = c.toString(16); 返回十六进制。长度== 1 ?“0”+ hex: hex; } 函数rgbToHex(r, g, b) { 返回“#”+ componentToHex(r) + componentToHex(g) + componentToHex(b); } alert(rgbToHex(0, 51,255));/ / # 0033 ff
另一种转换方式:
函数hexToRgb(hex) { var结果= / ^ # ? (f \ d {2}) (f \ d {2}) (f \ d{2}) /美元i.exec(十六进制); 返回结果?{ r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }: null; } 警报(hexToRgb (# 0033 ff) .g);/ /“51”;
最后,rgbToHex()的另一个版本,正如@casablanca的回答中所讨论的,并在@cwolves的评论中建议:
函数rgbToHex(r, g, b) { 返回“#”+ (1 < < 24 | r < < 16 g | < < 8 | b) .toString (16) .slice (1); } alert(rgbToHex(0, 51,255));/ / # 0033 ff
2012年12月3日更新
下面是hexToRgb()的一个版本,它也可以解析一个简化的十六进制三元组,例如“#03F”:
function hexToRgb(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } alert(hexToRgb("#0033ff").g); // "51"; alert(hexToRgb("#03f").g); // "51";
一个完全不同的方法转换十六进制颜色代码到RGB没有正则表达式
它根据字符串长度处理#FFF和#FFFFFF格式。它从字符串的开头删除#,并将字符串的每个字符分割并将其转换为base10,并将其添加到其位置的相应索引中。
//Algorithm of hex to rgb conversion in ES5 function hex2rgbSimple(str){ str = str.replace('#', ''); return str.split('').reduce(function(result, char, index, array){ var j = parseInt(index * 3/array.length); var number = parseInt(char, 16); result[j] = (array.length == 3? number : result[j]) * 16 + number; return result; },[0,0,0]); } //Same code in ES6 hex2rgb = str => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]); //hex to RGBA conversion hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]); //hex to standard RGB conversion hex2rgbStandard = str => `RGB(${str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]).join(',')})`; console.log(hex2rgb('#aebece')); console.log(hex2rgbSimple('#aebece')); console.log(hex2rgb('#aabbcc')); console.log(hex2rgb('#abc')); console.log(hex2rgba('#abc', 0.7)); console.log(hex2rgbStandard('#abc'));
看起来你在寻找这样的东西:
function hexstr(number) {
var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
var low = number & 0xf;
var high = (number >> 4) & 0xf;
return "" + chars[high] + chars[low];
}
function rgb2hex(r, g, b) {
return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}