SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot _theworks's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Converting Hex Color codes to RGB?

    Hi all,

    Was wondering if anyone knows a way to accurately convert hexadecimal color codes into RGB format?

    im currently using this function :

    Code:
    function getRGB(hexVal) {
      hexVal = hexVal.replace("#", "");
      var tmp =[];
      tmp[0] = parseInt(hexVal.substring(0,2),16);
      tmp[1] = parseInt(hexVal.substring(2,4),16);
      tmp[2] = parseInt(hexVal.substring(4,6),16);
      return tmp; 
    }
    This has proven to be very inaccurate.. and often results in the complete wrong color (ie. give it #FF00FF(purple) and it will return [255, 255, 0](yellow) )

    any help would be much appreciated

    Thanks in advance!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    See http://javascript.about.com/library/blbitcl.htm for both the most efficient way of extracting the colours and an explanation of how it works.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru SSJ's Avatar
    Join Date
    Jan 2007
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Me also needed this
    Thanx felgall....

  4. #4
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your function looks ok to me, I'd only clean it up a bit:
    Code:
    function getRGB(hexVal) {
    	return [
    		parseInt(hexVal.substring(1, 3), 16),
    		parseInt(hexVal.substring(3, 5), 16),
    		parseInt(hexVal.substring(5, 7), 16)
    	];
    }
    Another possible approach is to use bit arithmetics
    Code:
    function getRGB2(hexVal) {
    	hexVal = parseInt(hexVal.substr(1), 16);
    	return [
    		0xFF & (hexVal >> 16),
    		0xFF & (hexVal >> 8),
    		0xFF & (hexVal)
    	];
    }

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you know the color is a 6 digit hex code:

    function hextoRgb(hex){
    if (/^\#[a-f0-9]{6}$/.test(hex)){
    hex=hex.replace(/^#/,'0x');
    var c= [(hex >>16) & 255,(hex >> 8) & 255, hex & 255];
    return 'rgb('+c.join(',')+')';
    }
    return false;
    }
    firefox returns colors in rgb format, no matter how you define them
    in your html, scripts or stylesheets. IE returns the literal definition,
    which can be '#ff0000' or '#f00' or 'rgb(255,0,0)'or 'rgb(100&#37;,0,0)' or 'red'.

    To return an rgb value for any valid color string you need a little more code:

    function rgbColor(color){
    if(/^rgb\(\d+%?,\d+%?,\d+%?\)$/i.test(color)) return color;
    var hex= color.toLowerCase();
    if(/^#/.test(hex)==false){
    if(hex=='transparent')return hex;
    cnames={
    aqua:'00ffff',black:'000000',blue:'0000ff',
    fuchsia:'ff00ff',gray:'808080',green:'008000',lime:'00ff00',
    maroon:'800000',navy:'000080',olive:'808000',purple:'800080',
    red:'ff0000',silver:'c0c0c0',teal:'008080',white:'ffffff',yellow:'ffff00'
    }
    hex= cnames[hex];
    if(!hex) return '';
    hex='#'+hex;
    }
    if (/^\#[a-f0-9]{3}$/.test(hex)){
    var A = hex.substring(1).split('');
    for(var i= 0; i< 3; i++) A[i]+=A[i];
    hex='#'+A.join('');
    }
    if (/^\#[a-f0-9]{6}$/.test(hex)){
    hex=hex.replace(/^#/,'0x');
    var c= [(hex >>16) & 255,(hex >> 8) & 255, hex & 255];
    return 'rgb('+c.join(',')+')';
    }

    }
    I use this on the back end, to convert all the color, background-color and border-color declarations and expressions to rgb, as part of rewriting sites for validation and accessibility.

    It is also handy for online editors that accept user input for colors.
    But it is a very good idea to use rgb values in your code, and avoid the need for conversion.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •