Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Convert HEX to RGB

Give function hex code (e.g. #eeeeee), returns array of RGB values.

function hex2rgb( $colour ) {
        if ( $colour[0] == '#' ) {
                $colour = substr( $colour, 1 );
        }
        if ( strlen( $colour ) == 6 ) {
                list( $r, $g, $b ) = array( $colour[0] . $colour[1], $colour[2] . $colour[3], $colour[4] . $colour[5] );
        } elseif ( strlen( $colour ) == 3 ) {
                list( $r, $g, $b ) = array( $colour[0] . $colour[0], $colour[1] . $colour[1], $colour[2] . $colour[2] );
        } else {
                return false;
        }
        $r = hexdec( $r );
        $g = hexdec( $g );
        $b = hexdec( $b );
        return array( 'red' => $r, 'green' => $g, 'blue' => $b );
}

Comments

  1. Adam

    Thanks, I used it as a good starting point.
    I’ve updated it slightly to be shorter and with the assumption the end hex is always 6 characters (as I control the input). The str_split() might be helpful for your code maybe?

    function($hexString){
    $hexString = preg_replace(“/[^abcdef]/i”,””,$hexString);
    if(strlen($hexString)==6){
    list($r,$g,$b) = str_split($hexString,2);
    return Array(“r”=>hexdec($r),”g”=>hexdec($g),”b”=>hexdec($b));
    }

    • Adam

      I just realised I didn’t copy the entire code.
      There’s a false missing off the end! heh….

      function hex2rgb($hexString){
      $hexString = preg_replace(“/[^abcdef]/i”,””,$hexString);
      if(strlen($hexString)==6){
      list($r,$g,$b) = str_split($hexString,2);
      return Array(“r”=>hexdec($r),”g”=>hexdec($g),”b”=>hexdec($b));
      }
      return false;
      }

  2. Dave E
    Permalink to comment#

    If anyone is interested in a javascript equivalent I used this (Not perfect but seems to do the job) :

    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 + “)”;
    }

  3. Userakos
    Permalink to comment#

    I want to say that this site has high quality content!!!
    Of course, the code above, was just what I wanted.

  4. Jamie Murphy
    Permalink to comment#

    thanks, you are a life saver. I needed this for a client project and had been playing for ages but I couldn’t get it quite right!

    Thanks again!

  5. The Frosty
    Permalink to comment#

    Super awesome code snippet to put inside a WordPress plugin!

  6. Sunny Verma
    Permalink to comment#

    Here is another smaller function to convert hex to rgb

    function hexrgb($hexstr) {
        $int = hexdec($hexstr);
        return array("red" => 0xFF & ($int >> 0x10), "green" => 0xFF & ($int >> 0x8), "blue" => 0xFF & $int);
    }
    

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```