My studying notebook

2010/07/02

Convert rgb color to hex color

7/02/2010 11:00:00 AM Posted by Unknown , , , 7 comments
If you have written HTML file, you must know that how to assign color to DOM element. You just need to assign CSS style to
DOM element like

<span style="color:#ff0000">This is text</span>
It is very simple. But, we may want to change the color
by Javascript like color picker. What's the problem? You may get the "rgb(255, 0, 0)" color value by Javascript.
Then, you have to convert rgb to hex color or convert hex to rgb color. The following is simple code.

rgb to hex


function rgb2hex(rgb){
var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
var hex = function(x){
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
};
var tmp = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var color = hex(tmp[1]) + hex(tmp[2]) + hex(tmp[3]);
return color;
}

hex to rgb

function hex2rgb(v){
if (/^[0-9A-F]{3}$|^[0-9A-F]{6}$/.test(v.toUpperCase())) {
if (v.length == 3) {
v = v.match(/[0-9A-F]/g);
v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2];
this.value = v;
}

var r = parseInt(v.substr(0, 2), 16);
var g = parseInt(v.substr(2, 2), 16);
var b = parseInt(v.substr(4, 2), 16);
return [r, g, b].join(',');
}
return v;
}

Result

var input = $(this).css('color'); // rgb(255,0,0)

var hex = rgb2hex(input); //ff0000
var rgb = hex2rgb(hex); //255,0,0

7 comments:

  1. Gaining Python certifications will validate your skills and advance your career.
    python certification

    ReplyDelete
  2. All of pitbull dog and puppy are sent home. Current on shots, deworming, flea treated, health certificate, genetic health guarantee, and AKC registration papers. All new families are required to sign a contract that includes a basic health guarantee and a 3 year genetic health guarantee.
    Pitbull Puppies For Sale
    american pitbull terrier puppies
    pitbull puppies for sale near me
    pitbull breeders for sale
    pit bull breeders near me
    pit bull puppy
    baby pitbulls for sale

    ReplyDelete
  3. Actually I read it yesterday I looked at most of your posts but I had some ideas about it . This article is probably where I got the most useful information for my research and today I wanted to read it again because it is so well written.
    Data Science Course in Bangalore

    ReplyDelete
  4. i am glad to discover this page : i have to thank you for the time i spent on this especially great reading !! i really liked each part and also bookmarked you for new information on your site.
    best data science courses in bangalore

    ReplyDelete
  5. i am glad to discover this page : i have to thank you for the time i spent on this especially great reading !! i really liked each part and also bookmarked you for new information on your site.
    data scientist course in bangalore

    ReplyDelete