function getRGB(color){
if(color.length == 7){
var r = parseInt(color.substr(1,2),16);
var g = parseInt(color.substr(3,2),16);
var b = parseInt(color.substr(5,2),16);
return 'rgb('+r+','+g+','+b+')' ;
}
else
console.log('Enter correct value');
}
var a = getRGB('#f0f0f0');
if(!a){
a = 'Enter correct value';
}
a;
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";
1
hexToRgb的替代版本:
function hexToRgb(hex) {
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return r + "," + g + "," + b;
}
编辑:3/28/2017这是另一种似乎更快的方法
function hexToRgbNew(hex) {
var arrBuff = new ArrayBuffer(4);
var vw = new DataView(arrBuff);
vw.setUint32(0,parseInt(hex, 16),false);
var arrByte = new Uint8Array(arrBuff);
return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}
function hexToRGBA(hex, alpha){
hex = (""+hex).trim().replace(/#/g,""); //trim and remove any leading # if there (supports number values as well)
if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) throw ("not a valid hex string"); //Regex Validator
if (hex.length==3){hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]} //support short form
var b_int = parseInt(hex, 16);
return "rgba("+[
(b_int >> 16) & 255, //R
(b_int >> 8) & 255, //G
b_int & 255, //B
alpha || 1 //add alpha if is set
].join(",")+")";
}
8
这是我的版本:
function rgb2hex(red, green, blue) {
var rgb = blue | (green << 8) | (red << 16);
return '#' + (0x1000000 + rgb).toString(16).slice(1)
}
function hex2rgb(hex) {
// long version
r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
if (r) {
return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
}
// short version
r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
if (r) {
return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
}
return null;
}
R = HexToR("#FFFFFF");
G = HexToG("#FFFFFF");
B = HexToB("#FFFFFF");
function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
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);
}
985
Tim Down的最高评价答案提供了我可以看到的转换为RGB的最佳解决方案 . 我更喜欢这种Hex转换的解决方案,因为它提供了最简洁的边界检查和零填充以转换为Hex .
function RGBtoHex (red, green, blue) {
red = Math.max(0, Math.min(~~this.red, 255));
green = Math.max(0, Math.min(~~this.green, 255));
blue = Math.max(0, Math.min(~~this.blue, 255));
return '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6);
};
30 回答
虽然这个答案不太可能完全符合这个问题,但它可能会非常有用 .
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
您的颜色已转换为Rgb适用于:Hsl,Hex
不适用于:命名颜色
接受字符串的速记版本:
检查它是否已经是十六进制
这可以用于从计算的样式属性中获取颜色:
参考文献:
https://github.com/k-gun/so/blob/master/so_util.js#L10
https://github.com/k-gun/so/blob/master/so_util.js#L62
https://github.com/k-gun/so/blob/master/so_util.js#L81
我遇到了这个问题,因为我想接受任何颜色值并且能够添加不透明度,所以我制作了这个在现代浏览器上使用本机画布的快速jQuery插件 . 似乎工作得很好 .
Edit
结果我无法弄清楚如何使它成为一个合适的jQuery插件,所以我只是将它作为常规函数呈现 .
我需要一个接受无效值的函数
rgb(-255,255,255)rgb(510,255,255)
这是@cwolves回答的分歧
(2017) SIMPLE ES6 composable arrow functions
对于那些可能正在使用ES6编写一些现代功能/组合js的人,我无法抗拒 . 以下是我在颜色模块中使用的一些光滑的单行程序,它为数据可视化进行颜色插值 .
请注意,这根本不处理alpha通道 .
HTML使用十六进制系统,rgb使用十进制系统 . 所以你必须将数字从十六进制转换为十进制,反之亦然 .
以下将对RGB到十六进制转换进行操作并添加任何所需的零填充:
转换另一种方式:
最后,
rgbToHex()
的另一个版本,正如@ casablanca的回答中所讨论的那样,并在@cwolves的评论中提出:2012年12月3日更新
这是
hexToRgb()
的一个版本,它也解析一个速记的十六进制三元组,如"#03F":hexToRgb的替代版本:
编辑:3/28/2017这是另一种似乎更快的方法
编辑:8/11/2017经过更多测试后,上面的新方法并不快:( . 虽然这是一种有趣的替代方式 .
ECMAScript 6版Tim Down的回答
将RGB转换为十六进制
将十六进制转换为RGB
返回一个数组
[r, g, b]
. 也适用于速记十六进制三元组,如"#03F"
.Bonus:使用padStart()方法将RGB转换为十六进制
请注意,此答案使用最新的ECMAScript功能,旧版浏览器不支持这些功能 . 如果您希望此代码适用于所有环境,则应使用Babel编译代码 .
A total different approach to convert hex color code to RGB without regex
它根据字符串的长度处理
#FFF
和#FFFFFF
格式 . 它从字符串的开头删除#
并将字符串的每个字符分开并将其转换为base10并将其添加到其位置基础上的相应索引中 .考虑到很多答案只能部分回答问题(从RGB到HEX或其他方式)我想我也会发布我的部分答案 .
我有一个类似的问题,我想做这样的事情:输入任何有效的CSS颜色(HSL(a),RGB(a),HEX或颜色名称)和1.能够添加或删除alpha值,2 . 返回一个rgb(a)对象 . 我为此准备了一个插件 . 它可以在GitHub上找到(它需要jQuery,但如果你想要你可以分叉并制作一个vanilla版本) . 这是a demo page . 您可以try for yourself并查看动态生成的输出 .
我将复制粘贴选项:
RGB Generator接受一个参数,即颜色,并提供三个选项:asObject,addAlpha和removeAlpha . 省略三个选项时,RGB颜色将作为字符串返回 .
请注意,默认情况下包含alpha组件 . 如果输入值包含alpha值,则输出将为RGBa格式 .
您可以通过将removeAlpha设置为true来禁用此行为 . 这将从初始HSLa或RGBa颜色中删除任何alpha值 .
另一方面,如果要添加Alpha通道,可以通过将addAlpha设置为0到1之间的任何值来实现 . 当输入为非透明颜色时,将添加alpha值 . 如果它是透明的,则提供的值将覆盖输入的alpha分量 .
最后,还可以输出RGB(a)颜色作为对象 . 它将由r,g,b和任选的a组成 .
要直接从jQuery转换,您可以尝试:
此代码接受#fff和#ffffff变体和不透明度 .
我的hex2rbg版本:
接受像#fff这样的短十六进制
算法兼容性为o(n),应该比使用正则表达式更快 . 例如
String.replace, String.split, String.match
等..使用恒定空间 .
支持rgb和rgba .
如果您正在使用,可能需要删除hex.trim()IE8 .
例如
码:
如果需要比较两个颜色值(以rgb,名称颜色或十六进制值给出)或转换为HEX,请使用HTML5画布对象 .
我发现了这一点,因为我认为这是非常简单的并且有验证测试并且支持alpha值(可选),这将适合这种情况 .
如果你知道你正在做什么,那么只需注释掉正则表达式线,它就会快一点 .
这是我的版本:
对于3位数,Tim Down的hexToRgb功能可以改进如下:
我假设你的意思是HTML风格的十六进制表示法,即
#rrggbb
. 您的代码几乎是正确的,除非您已将订单撤消 . 它应该是:此外,使用位移可能会使它更容易阅读:
One-line functional HEX to RGBA
支持短
#fff
和长#ffffff
形式 .支持alpha通道(不透明度) .
不关心是否指定了哈希,在两种情况下均适用 .
例子:
//忽略hsl表示法,颜色值通常表示为名称,rgb,rgba或hex-
//十六进制可以是3个值或6 .
// Rgb可以是百分比也可以是整数值 .
//至少应该考虑所有这些格式 .
愿你这样的事吗?
显示#9687c8
使用这些函数可以毫无问题地获得结果 . :)
我正在使用XAML数据,其格式为#AARRGGBB(Alpha,Red,Green,Blue) . 使用上面的答案,这是我的解决方案:
http://jsfiddle.net/kvLyscs3/
@Tim,添加到你的答案(它有点尴尬,将其纳入评论) .
如上所述,我发现rgbToHex函数返回一个字符串,该字符串包含点之后的元素,并且它要求r,g,b值落在0-255范围内 .
我敢肯定这对大多数人来说似乎是显而易见的,但我花了两个小时才弄明白,到那时原来的方法已经膨胀到7行,然后才发现我的问题出现在其他地方 . 因此,为了节省其他时间和麻烦,这是我稍微修改过的代码,它检查先决条件并修剪字符串的无关位 .
Tim Down的最高评价答案提供了我可以看到的转换为RGB的最佳解决方案 . 我更喜欢这种Hex转换的解决方案,因为它提供了最简洁的边界检查和零填充以转换为Hex .
使用左移'<<'和或'|'运营商也是一个有趣的解决方案 .