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. 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));
    }

    • 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. 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. 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. Super awesome code snippet to put inside a WordPress plugin!

  6. 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>
```