如何将颜色在RGB格式转换为十六进制格式,反之亦然?
例如,将'#0080C0'转换为(0,128,192)。
如何将颜色在RGB格式转换为十六进制格式,反之亦然?
例如,将'#0080C0'转换为(0,128,192)。
当前回答
对于直接从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'))
其他回答
ECMAScript 6版本的Tim Down的答案
将RGB转换为十六进制
const rgbToHex = (r, g, b) => '#' + [r, g, b]。映射(x => { const十六进制= x.toString(16) 返回十六进制。长度=== 1 ?'0' + hex: hex }) . join () console.log(rgbToHex(0,51,255));/ / # 0033 ff的
将十六进制转换为RGB
返回一个数组[r, g, b]。工作也与速记十六进制三胞胎,如“#03F”。
const hexToRgb = hex => hex.replace (/ ^ # ? (\ d] [a - f) (\ d] [a - f) (\ d] [a - f) $ /我 ,(m, r, g, b) => '#' + r + r + g + g + b + b) .substring (1) .match (/ {2} / g)。 .map(x => parseInt(x, 16)) console.log(hexToRgb("#0033ff")) // [0,51,255] console.log(hexToRgb("#03f")) // [0,51,255]
附加:RGB到十六进制使用padStart()方法
const rgbToHex = (r, g, b) => '#' + [r, g, b] .map(x => x. tostring(16)。padStart (2, ' 0 ')) . join () console.log(rgbToHex(0,51,255));/ / # 0033 ff的
注意,这个答案使用了最新的ECMAScript特性,旧的浏览器不支持这些特性。如果希望此代码在所有环境中都能工作,则应该使用Babel来编译代码。
这段代码接受#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(',')+')';
}
@ 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);
}
以下是我的看法:
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;
}
//忽略hsl符号,颜色值通常表示为名称,rgb, rgba或十六进制
//十六进制可以是3或6。
// Rgb可以是百分比也可以是整数值。
//至少最好能解释所有这些格式。
String.prototype.padZero= function(len, c){
var s= this, c= c || "0", len= len || 2;
while(s.length < len) s= c + s;
return s;
}
var colors={
colornames:{
aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
},
toRgb: function(c){
c= '0x'+colors.toHex(c).substring(1);
c= [(c>> 16)&255, (c>> 8)&255, c&255];
return 'rgb('+c.join(',')+')';
},
toHex: function(c){
var tem, i= 0, c= c? c.toString().toLowerCase(): '';
if(/^#[a-f0-9]{3,6}$/.test(c)){
if(c.length< 7){
var A= c.split('');
c= A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3];
}
return c;
}
if(/^[a-z]+$/.test(c)){
return colors.colornames[c] || '';
}
c= c.match(/\d+(\.\d+)?%?/g) || [];
if(c.length<3) return '';
c= c.slice(0, 3);
while(i< 3){
tem= c[i];
if(tem.indexOf('%')!= -1){
tem= Math.round(parseFloat(tem)*2.55);
}
else tem= parseInt(tem);
if(tem< 0 || tem> 255) c.length= 0;
else c[i++]= tem.toString(16).padZero(2);
}
if(c.length== 3) return '#'+c.join('').toLowerCase();
return '';
}
}
//var c='#dc149c';
//var c='rgb(100%,25%,0)';
//
var c= 'red';
alert(colors.toRgb(c)+'\n'+colors.toHex(c));