我正在使用带有 ColorPropsPlugin 的 TweenMax JS 库，它将补间以多种格式指定的颜色值，我遇到的问题是结果始终采用字符串的形式：
"rgb(255,255,255)"
如何将其转换为十六进制数字，例如：
0xffffff
问问题
30382 次
9 回答
42
我首先会删除 CSS 部分：
var a = "rgb(255,255,255)".split("(")[1].split(")")[0];
然后将其拆分为单独的数字：
a = a.split(",");
将单个数字转换为十六进制
var b = a.map(function(x){ //For each array element
x = parseInt(x).toString(16); //Convert to a base16 string
return (x.length==1) ? "0"+x : x; //Add zero if we get only one character
})
并将其粘在一起：
b = "0x"+b.join("");
于 2012-10-25T13:55:35.250 回答
12
以下内容改编Colour自我编写和使用的一个类，但由于它处理百分比和负数，因此可能无法满足您的需求。
演示：http: //jsfiddle.net/5ryxx/1/
代码：
function componentFromStr(numStr, percent) {
var num = Math.max(0, parseInt(numStr, 10));
return percent ?
Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);
}
function rgbToHex(rgb) {
var rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
var result, r, g, b, hex = "";
if ( (result = rgbRegex.exec(rgb)) ) {
r = componentFromStr(result[1], result[2]);
g = componentFromStr(result[3], result[4]);
b = componentFromStr(result[5], result[6]);
hex = "0x" + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
return hex;
}
于 2012-10-25T14:13:38.283 回答
6
这就是我所做的。
String.prototype.toRGB = function() {
var rgb = this.split( ',' ) ;
this.r=parseInt( rgb[0].substring(4) ) ; // skip rgb(
this.g=parseInt( rgb[1] ) ; // this is just g
this.b=parseInt( rgb[2] ) ; // parseInt scraps trailing )
}
运行后'rgb(125,181,215)'.toRGB()，您将获得.r,.g和.b在返回的同一字符串对象中定义的属性（使用正确的整数值）。
要获取十六进制值，只需使用yourNumber.toString(16);
于 2014-01-22T20:13:39.700 回答
3
rgb2Hex = s => s.match(/[0-9]+/g).reduce((a, b) => a+(b|256).toString(16).slice(1), '0x')
console.log(rgb2Hex('rgb(10, 11, 12)'), rgb2Hex('rgb(255, 256, 257)'))不推荐用于不可靠的用户输入，但字符串也可以作为函数进行评估：
rgb = (r, g, b) => '0x' + (1<<24|r<<16|g<<8|b).toString(16).slice(1)
console.log(eval('rgb(10, 11, 12)'), eval('rgb(255)'))于 2017-09-16T20:26:34.200 回答
3
function parseColor(color) {
var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); });
return {
hex: "#" + arr.slice(0, 3).map(toHex).join(""),
opacity: arr.length == 4 ? arr[3] : 1
};
}
function toHex(int) {
var hex = int.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
parseColor("rgb(210, 10, 10)"); // {"hex":"#d20a0a","opacity":1}
parseColor("rgba(210, 10, 10, 0.5)"); // {"hex":"#d20a0a","opacity":"0.5"}
parseColor("rgb(210)"); // {"hex":"#d2","opacity":1}
于 2016-01-08T18:39:40.093 回答
2
RGBToHex = function(r,g,b){
var bin = r << 16 | g << 8 | b;
return (function(h){
return new Array(7-h.length).join("0")+h
})(bin.toString(16).toUpperCase())
}
https://gist.github.com/lrvick/2080648
编辑：
cnvrtRGBClrToHex('255,145,20')
function cnvrtRGBClrToHex(rgbClr){
var rgbClr = rgbClr.split(',');
var r = rgbClr[0];
var g = rgbClr[1];
var b = rgbClr[2];
return (r << 16 | g << 8 | b).toString(16).toUpperCase()
}
于 2017-02-01T19:48:05.783 回答
2
一种代码高尔夫方法：
var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + (+z).toString(16)).join('');
现在， runningh("rgb(255, 60, 60)")将返回#ff3c3c。
您可以替换'#'为'0x'以0xff3c3c.
额外：它是如何工作的。
h，声明为箭头函数（ES6 中的新功能）采用 RGB 值（字符串）并将其存储在x. 然后，x通过正则表达式方程 找到所有数字实例/\d+/g，并进一步用作数组（由 返回，由match使用map）。
map循环通过一个函数处理返回数组的所有元素y。该函数将一个值（作为字符串存储在数组中）转换z为数字+z（((+z < 16)?'0':'')将 a 添加'0'到元素的开头。
然后，它将其转换为以 16 为底的字符串（十六进制，按.toString(16)），并将其返回为map. 所以本质上，数组中的所有十进制字符串现在都更改为十六进制字符串。
最后，将数组的元素连接在一起 ( join(''))，没有分隔符，并'#'添加到字符串的开头。
注意：如果提供的代码值大于 255，则输出将超过 6 个十六进制数字。就像，输出rgb(256, 0, 0)将是#1000000.
要将值限制为 255，代码如下：
var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + ((+z > 255)?255:+z).toString(16)).join('');
于 2017-03-30T15:22:17.017 回答
1
用于 rgb 字符串到十六进制字符串的可读 oneliner：
rgb = "rgb(0,128,255)"
hex = '#' + rgb.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2,0)).join('')
返回这里"#0080ff"。
于 2021-08-14T11:15:55.497 回答
0
在 JavaScript 中将 RGB 颜色转换为 HEX 的另一种方法
color = "rgb(51,51,51);";
color = '#'+color.match(/\d+/g).map(function(x){
x = parseInt(x).toString(16);
return (x.length==1) ? "0"+x : x;
}).join("");
于 2020-04-28T11:55:25.113 回答