Get background-color in #000 format and not RGB

Question

With this code, I get the RGB color of any TD in my table :

alert($(this).css('background-color'));

the result is :

rgb(0, 255, 0)

Is it possible with jquery to obtain the #000 format or have I to use a function to transform the rgb in #000 format ?

Thanks in advance for your help

http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery — Eli, Mar 30 '13 at 08:50
Not sure if this is what you are after? [Get hex value rather than RGB value using jQuery][1] [1]: http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery — ojhawkins, Mar 30 '13 at 08:51
@ojhawkins -> thank you for your reply, I found the solution thanks to you, thank you. bee — David, Mar 30 '13 at 09:12
Sorry, posted an answer but automatically got moved to a comment so the markup looks funny. @Jashwant — ojhawkins, Mar 30 '13 at 09:16

score 12 · Accepted Answer · edited Aug 22 '13 at 09:52

12

Try

var color = '';
$('div').click(function() {
   var hexcolor = $(this).css('backgroundColor');
   hexc(hexcolor);
   alert(color);
});

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');

    return color;
}

edited Aug 22 '13 at 09:52

Alvaro

40,778
30
164
336

answered Mar 30 '13 at 08:54

Devang Rathod

6,650
2
23
32

Thanks for your code, I'm going to try it. – David Mar 30 '13 at 09:15
@beegees have you tried ? – Devang Rathod Mar 30 '13 at 09:37
1

@beegees if it works , you must accept so this question doesn't show in unanswered question. – Devang Rathod Mar 30 '13 at 11:47

SeinopSys · Answer 2 · 2022-08-07T15:13:16.900

Here's a function I wrote earlier, it does the job for me, and has no looping.

function rgbToHex(total) {
    var total = total.toString().split(',');
    var r = total[0].substring(4);
    var g = total[1].substring(1);
    var b = total[2].substring(1,total[2].length-1);
    return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
}
function checkNumber(i){
    i = i.toString();
    if (i.length == 1) return '0'+i;
    else return i;
}

Snippet:

$('.background').each(function(){
    $(this).html(rgbToHex($(this).css("backgroundColor")));
});

function rgbToHex(total) {
        var total = total.split(',');
        var r = total[0].substring(4);
        var g = total[1].substring(1);
        var b = total[2].substring(1,total[2].length-1);
    return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
}
function checkNumber(i){
    i = i.toString();
    if (i.length == 1) return '0'+i;
    else return i;
}

.background {
    border:2px solid #000;
    width:30px;
    height:30px;
    display:inline;
    padding:3px;
}
.style1 { background-color:#000000; color:#fff }
.style2 { background-color:#ff0000 }
.style3 { background-color:#ffff00 }
.style4 { background-color:#00ffff }
.style5 { background-color:#0000ff;color:#fff }
.style6 { background-color:#00ff00 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="background style1"></div>
<div class="background style2"></div>
<div class="background style3"></div>
<div class="background style4"></div>
<div class="background style5"></div>
<div class="background style6"></div>

Get background-color in #000 format and not RGB

2 Answers2

Linked