使用下面的jQuery将获得元素背景颜色的RGB值:

$('#selector').css('backgroundColor');

有没有办法得到十六进制值而不是RGB?


当前回答

下面是我发现的一个解决方案,它不会在IE中抛出脚本错误: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx

其他回答

我漂亮的非标准解

HTML

<div id="selector" style="background-color:#f5b405"></div>

jQuery

$("#selector").attr("style").replace("background-color:", "");

结果

#f5b405

将RGB转换为十六进制

我用的是茉莉花量角器,结果出现了一些错误 -期望['rgba(255, 255, 255, 1)']包含'#fff'。 下面的函数对我来说工作得很好。

function RGBAToHexA(test:string) {
let sep = test.toString().indexOf(",") > -1 ? "," : " ";
const rgba = test.toString().substring(5).split(")")[0].split(sep);
console.log(rgba)
let r = (+rgba[0]).toString(16),
  g = (+rgba[1]).toString(16),
  b = (+rgba[2]).toString(16),
  a = Math.round(+rgba[3] * 255).toString(16);

    if (r.length == 1)
        r = "0" + r;
    if (g.length == 1)
        g = "0" + g;
    if (b.length == 1)
        b = "0" + b;
    if (a.length == 1)
        a = "0" + a;

return "#" + r + g + b + a;

}

describe('Check CSS', function() {
 
it('should check css of login page', async function(){
        browser.waitForAngularEnabled(true);
        browser.actions().mouseMove(element(by.css('.btn-auth, .btn-auth:hover'))).perform(); // mouse hover on button
        csspage.Loc_auth_btn.getCssValue('color').then(function(color){
            console.log(RGBAToHexA(color))
            expect( RGBAToHexA(color)).toContain(cssData.hoverauth.color);

        })

       

Steven Pribilinskiy的答案去掉了前导零,例如#ff0000变成了#ff00。

一种解决方案是在最后两位数字后面附加一个前导0和子字符串。

var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);
var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

(源)

对于所有函数式编程爱好者,这里有一个有点函数式的方法:)

const getHexColor = (rgbValue) =>
  rgbValue.replace("rgb(", "").replace(")", "").split(",")
    .map(colorValue => (colorValue > 15 ? "0" : "") + colorValue.toString(16))
    .reduce((acc, hexValue) => acc + hexValue, "#")

然后这样使用它:

const testRGB = "rgb(13,23,12)"
getHexColor(testRGB)