How to convert rgb values into regular css color values?

Question

I trying to compare the styles of elements on my page. But one element dynamically changes it's text color to red, but represented as a rgb value. And the other element (to compare it with) uses #123456 values. Is there a converter somewhere that can take rgb and turn it into #number?

For example:

#000 instead of rgb(0, 0, 0)

Sorry I mean #number not what that was.

David G
– David G

2011-09-30 00:37:08 +00:00
Commented Sep 30, 2011 at 0:37 — David G
– David G, Commented Sep 30, 2011 at 0:37
OP probably means rgb(#, #, #) vs. 0xRRGGBB

mellamokb
– mellamokb

2011-09-30 00:37:14 +00:00
Commented Sep 30, 2011 at 0:37 — mellamokb
– mellamokb, Commented Sep 30, 2011 at 0:37
javascripter.net/faq/rgbtohex.htm

Bhesh Gurung
– Bhesh Gurung

2011-09-30 00:37:18 +00:00
Commented Sep 30, 2011 at 0:37 — Bhesh Gurung
– Bhesh Gurung, Commented Sep 30, 2011 at 0:37
can you show your expected inputs/outputs?

Daniel A. White
– Daniel A. White

2011-09-30 00:37:39 +00:00
Commented Sep 30, 2011 at 0:37 — Daniel A. White
– Daniel A. White, Commented Sep 30, 2011 at 0:37

kennebec · Accepted Answer · 2011-09-30 03:37:54Z

3

People always forget that rgb colors can be expressed as percentages, as well as integers.

function rgbToHex(rgb){
    var i= 0, c, hex= '#',
    rgb= String(rgb).match(/\d+(\.\d+)?%?/g);
    while(i<3){
        c= rgb[i++];
        if(c.indexOf('%')!= -1){
            c= Math.round(parseFloat(c)*2.55);
        }
        c= (+c).toString(16);
        if(c.length== 1) c= '0'+c;
        hex+= c;
    }
    return hex;
}




alert(rgbtohex('rgb(255,127,0)')+'\n'+
rgbtohex('rgb(100%,50%,0)'));

/*  returned value: 
#ff7f00
#ff7f00
*/

// also works with arrays- rgbToHex([100,200,60])

// returned value: #64c83c

edited Sep 30, 2011 at 3:37

answered Sep 30, 2011 at 3:31

kennebec

105k32 gold badges109 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason Barry · Accepted Answer · 2011-09-30 00:55:21Z

2

function rgbToHex(R, G, B){
    return toHex(R) + toHex(G) + toHex(B);
}

function toHex(n){
    n = parseInt(n, 10);
    if( isNaN(n) ){ 
        return "00";
    }
    n = Math.max(0, Math.min(n,255));
    return "0123456789ABCDEF".charAt((n - n % 16) / 16) + "0123456789ABCDEF".charAt(n % 16);
}

edited. courtesy of http://www.javascripter.net/faq/rgbtohex.htm

edited Sep 30, 2011 at 0:55

answered Sep 30, 2011 at 0:42

Jason Barry

7585 silver badges17 bronze badges

2 Comments

James Khoury Over a year ago

Ah beat me to it! ;) The only thing i would suggest is to change your parseInt()s to parseInt("number string", 10) just to be safe.

David G Over a year ago

I got an error. alert(colorToHex('rgb(0, 0, 0)')); returns #0 and that's it.

Collectives™ on Stack Overflow

How to convert rgb values into regular css color values?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related