HEX to RGB Converter

Question

I have the JavaScript for converting a HEX value to RGB but I was wondering if I could use jQuery to call the function and insert the HTML?

Here's the JavaScript;

function hex2rgb( colour ) {
    var r,g,b;
      if ( colour.charAt(0) == ‘#’ ) {
          colour = colour.substr(1);
    }

    r = colour.charAt(0) + ” + colour.charAt(1);
    g = colour.charAt(2) + ” + colour.charAt(3);
    b = colour.charAt(4) + ” + colour.charAt(5);

    r = parseInt( r,16 );
    g = parseInt( g,16 );
    b = parseInt( b ,16);
    return “rgb(” + r + “,” + g + “,” + b + “)”;
}

Update

I'm trying to have it so there is one input field where you type in a hex value, hit enter, and then the RGB value is inserted (maybe in a ghost element or something).

Might need a little more info on what your trying to do specifically. — Kevin Boucher, Oct 17 '12 at 21:38
Are you thinking: hex value goes in text input -> push button -> output rgb as text? — st3inn, Oct 17 '12 at 21:41

score 2 · Answer 1 · answered Oct 18 '12 at 04:26

valid hex colors can have 3 or 6 characters after the '#'

function hexToRgb(hex){
    if(/^#([a-f0-9]{3}){1,2}$/.test(hex)){
        if(hex.length== 4){
            hex= '#'+[hex[1], hex[1], hex[2], hex[2], hex[3], hex[3]].join('');
        }
        var c= '0x'+hex.substring(1);
        return 'rgb('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+')';
    }
}

st3inn · Accepted Answer · 2012-10-17T22:12:20.960

HTML:

<input type="text" id="hex-input" placeholder="hex goes here"/>
<button id="magic-button">PUSH ME!</button>
<div id="rgb-output"></div>

JS:

$(document).ready(function() {
    $("#magic-button").click(function() {
        $("#rgb-output").html(hex2rgb($("#hex-input").val()));
    });

    $("#hex-input").keyup(function(event){
        if(event.keyCode == 13){
            $("#magic-button").click();
        }
    });
});

function hex2rgb( colour ) {
    var r,g,b;
    if ( colour.charAt(0) == '#' ) {
        colour = colour.substr(1);
    }
    if ( colour.length == 3 ) {
        colour = colour.substr(0,1) + colour.substr(0,1) + colour.substr(1,2) + colour.substr(1,2) + colour.substr(2,3) + colour.substr(2,3);
    }
    r = colour.charAt(0) + '' + colour.charAt(1);
    g = colour.charAt(2) + '' + colour.charAt(3);
    b = colour.charAt(4) + '' + colour.charAt(5);
    r = parseInt( r,16 );
    g = parseInt( g,16 );
    b = parseInt( b ,16);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

http://jsfiddle.net/2fb3D/

Sweet! Is there a way to make it work when I hit enter and to be able to use half hex values (e.g. #222 instead of #222222)? — user1658756, Oct 17 '12 at 22:07
Thanks! Is there also a way to reverse it or make a rgb to hex converter? — user1658756, Oct 18 '12 at 10:34
Might want to look here: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb — st3inn, Oct 18 '12 at 13:28

score -1 · Answer 3 · answered Oct 17 '12 at 21:39

-1

You can pass the elementId to the function

function hex2rgb( colour, id )
...
   $("#"+id).text("rgb(" + r + "," + g + "," + b + ")")
}

answered Oct 17 '12 at 21:39

Diodeus - James MacFarlane

112,730
33
157
176

Do you have an example / demo? I'm new to JS and this is confusing. – user1658756 Oct 17 '12 at 21:46

HEX to RGB Converter

Update

3 Answers3

Linked

Related