logo标签列表

从CSS颜色中提取r、g、b、a值的方法是什么？

javascriptjquerycsscolorsrgba
20

最简单的转换方式是什么？

$('#my_element').css('backgroundColor')

转换为这样的对象：

{ r: red_value, g: green_value, b: blue_value, a: alpha_value }

?

7个回答
28
var c = $('body').css('background-color');
var rgb = c.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');

for(var i in rgb) {
  console.log(rgb[i]);
}

在这里尝试一下http://jsbin.com/uhawa4

编辑：

var c = $('body').css('background-color');
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(',');

for(var i in rgb) {
  console.log(rgb[i]);
}

或者更简单的方法，只是针对数字。
var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);

for(var i in rgb) {
  console.log(rgb[i]);
}
谢谢！这非常接近我要找的东西 :) - Misha Moroshko
7
将var rgb = c.match(/\d+/g);替换为var rgb = c.match(/[.?\d]+/g);，以便正确匹配包含alpha值的rgba字符串中的浮点数，例如rgba(60,4,2,0.3)。 - Alfred Waligo
2
将rgba字符串转换为带有键的对象：
convertRGBtoOBJ(colorString)
{
  const rgbKeys = ['r', 'g', 'b', 'a'];
  let rgbObj = {};
  let color = colorString.replace(/^rgba?\(|\s+|\)$/g,'').split(',');

  for (let i in rgbKeys)
    rgbObj[rgbKeys[i]] = color[i] || 1;

  return rgbObj;
}

console.log(convertRGBtoOBJ('rgba(23,54,230,0.5)'))

/*
  Object {r: "23", g: "54", b: "230", a: 0.5}
*/
2

如您在这里所见：

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}

这个脚本基本上会从你的十六进制颜色代码（例如#F0556A）中取出每一组颜色，并使用基数为16的parseInt将其转换为整数。
2
把回答中的重要链接内容归档起来是一个好习惯，这样即使链接失效，它也不会失去大部分价值。 - underscore_d
2
你需要做的是这样的：
$.fn.ToRgb = function()
{
    if(this.charAt(0) == "#"){this = this.substring(1,7);} //remove the #
    return {
        R : parseInt(this.substring(0,2) ,16),
        G : parseInt(this.substring(2,4) ,16),
        B : parseInt(this.substring(4,6) ,16),
    }
}

RGB = $('#my_element').css('backgroundColor').ToRgb();


/*
   * console.log(rgb) =>
   * {
   *   R: X
   *   G: X
   *   B: X 
   * }
*/

相当简单 :)
我发现 $('#my_element').css('backgroundColor') 总是返回类似于 rgb(123, 87, 92) 或者 rgba(123, 87, 92, 0.7) 这样的东西。它能否也返回像 #123456 或者 123456 这样的东西呢？ - Misha Moroshko
这并没有特别要求。 - RobertPitt
@Robert - 这里的意思是输入值应该类似于 rgba(...)，因为一个简单的十六进制值如 #6400FF 无法表达不透明度。 - Matt Ball
这个在哪些浏览器上能用呢？我总是忘记哪些浏览器返回"rgb(a,b,c)"格式的值，哪些会返回其他格式... - Chris
这应该是跨浏览器友好的。 - RobertPitt
1

假设你有以下的CSS规则：

#my_element {
    background-color: rgba(100, 0, 255, 0.5);
}

那么这就是如何获取一个RBGA对象：

var colorStr = $('#my_element').css('backgroundColor'); // "rgba(100, 0, 255, 0.5)"

// using string methods
colorStr = colorStr.slice(colorStr.indexOf('(') + 1, colorStr.indexOf(')')); // "100, 0, 255, 0.5"
var colorArr = colorStr.split(','),
    i = colorArr.length;

while (i--)
{
    colorArr[i] = parseInt(colorArr[i], 10);
}

var colorObj = {
    r: colorArr[0],
    g: colorArr[1],
    b: colorArr[2],
    a: colorArr[3]
}
1
简单的函数，用于提取RGB数字值。 

function extractRgb (css) {
  return css.match(/[0-9.]+/gi)
}
console.log(extractRgb('rgb(255, 255, 255)'))
console.log(extractRgb('rgba(255, 255, 255, 0.7)'))

0
更简单：
 //javascript code
 var color = $('#my_element').css('backgroundColor');
 var rgb = /rgb\((\d+), (\d+), (\d+)\)/.exec(color);
  var r = rgb[1],
      g = rgb[2],
      b = rgb[3];
  console.log('Red  :' + r);
  console.log('Green:' + g);
  console.log('Blue :' + b);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接