Convert hex color to rgb or rgba using PHP

99Shares

As far as we know, many of WordPress theme developers use a lot of design options inside their themes, just as we do. Which means that you usually provide color pickers so the users may easily change color settings for their websites.

This usually means that you will need to create dynamic CSS files instead of a hard-coded CSS, so the user’s color changes may apply on the website instantly. As for HTML5/CSS3 standards, hex colors can’t always do all the work so you need to work with RGB or RGBA color codes.

While we have been struggling with this sometimes, we have made a little PHP helper function which converts hex color code string into RGB or even RGBA color. For example, if you want to add opacity to the color of some element and basically achieve “transparent hex code”.

Convert hex color to rgba – PHP function

Here’s the code:


/* Convert hexdec color string to rgb(a) string */

function hex2rgba($color, $opacity = false) {

	$default = 'rgb(0,0,0)';

	//Return default if no color provided
	if(empty($color))
          return $default; 

	//Sanitize $color if "#" is provided 
        if ($color[0] == '#' ) {
        	$color = substr( $color, 1 );
        }

        //Check if color has 6 or 3 characters and get values
        if (strlen($color) == 6) {
                $hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
        } elseif ( strlen( $color ) == 3 ) {
                $hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
        } else {
                return $default;
        }

        //Convert hexadec to rgb
        $rgb =  array_map('hexdec', $hex);

        //Check if opacity is set(rgba or rgb)
        if($opacity){
        	if(abs($opacity) > 1)
        		$opacity = 1.0;
        	$output = 'rgba('.implode(",",$rgb).','.$opacity.')';
        } else {
        	$output = 'rgb('.implode(",",$rgb).')';
        }

        //Return rgb(a) color string
        return $output;
}

/* Convert hexdec color string to rgb(a) string */

function hex2rgba($color, $opacity = false) {

$default = 'rgb(0,0,0)';

//Return default if no color provided

if(empty($color))

return $default;

//Sanitize $color if "#" is provided

if ($color[0] == '#' ) {

$color = substr( $color, 1 );

}

//Check if color has 6 or 3 characters and get values

if (strlen($color) == 6) {

$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );

} elseif ( strlen( $color ) == 3 ) {

$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );

} else {

return $default;

}

//Convert hexadec to rgb

$rgb = array_map('hexdec', $hex);

//Check if opacity is set(rgba or rgb)

if($opacity){

if(abs($opacity) > 1)

$opacity = 1.0;

$output = 'rgba('.implode(",",$rgb).','.$opacity.')';

} else {

$output = 'rgb('.implode(",",$rgb).')';

}

//Return rgb(a) color string

return $output;

}

So far so good! Now we are going to show you how this function can be helpful whilst creating dynamic CSS with a simple example below.

Usage example:


/* Here's a usage example how to use this function for dynamicaly created CSS */

$color = '#ffa226';
$rgb = hex2rgba($color);
$rgba = hex2rgba($color, 0.7);

/* CSS output */

echo '	
	div.example{
	 background: '.$rgb.';
	 color: '.$rgba.';
	}
';

/* Here's a usage example how to use this function for dynamicaly created CSS */

$color = '#ffa226';

$rgb = hex2rgba($color);

$rgba = hex2rgba($color, 0.7);

/* CSS output */

echo '

div.example{

background: '.$rgb.';

color: '.$rgba.';

}

99Shares

Would be awesome for this to be updated to support 8-digit Hex codes (for alpha) 😉

Good work Meks,
I have a question.
Is this a open source code, can I use for my project (Non commercial – GPLv2 Licence) ?
Thanks.

Meks says:
April 3, 2019 at 9:37 am
Yes, thanks for asking! You are free to use it anywhere you want 🙂

Why did you used the array_map function? it has only one element in the array?

Meks says:
January 24, 2019 at 3:31 pm
Robert,
Please check again.
It has 3 or 6 elements before doing array_map.

Nice function. And this is also good as well.

function lab_hex_to_rgb( $hex, $opacity = 1 ) {

$hex = str_replace( ‘#’, ”, $hex );

// if in 3 digit format
if( strlen( $hex ) == 3) {
$r = hexdec( substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) );
$g = hexdec( substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) );
$b = hexdec( substr( $hex, 2, 1 ) . substr( $hex, 2, 1 ) );
} else {
$r = hexdec( substr( $hex, 0, 2 ) );
$g = hexdec( substr( $hex, 2, 2 ) );
$b = hexdec( substr( $hex, 4, 2 ) );
}

return “rgba( $r, $g, $b, $opacity )”;

Copied from http://rollinglab.com/2013/02/convert-hexadecimal-rgba

2018. Still works, thanks!

Works like a charm! Thank you!

Hey man,

Thank you so much for this! Hope you have a great day!

I thank you very much for you output modifiuer snippet from here: http://modxcookbook.com/basics/modifiers/hex-to-rgba.html

Great Work!

Thank you, this piece of code saved my life.

Thank you so much 🙂

This is extremely helpful, thanks!

Works wonderfully as the heart of a hex2rgba output modifier for MODX. http://modxcookbook.com/basics/modifiers/hex-to-rgba.html

I used it on javascript. is it correct?

function hex2rgba_convert(hex,opacity){
hex = hex.replace(‘#’,”);
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);

result = ‘rgba(‘+r+’,’+g+’,’+b+’,’+opacity/100+’)’;
return result;
}

Your tutorial is excellent and helpful.
It’s a simple jS function, it helps convert hex to RGBA.
$(document).ready(function() {

$(‘#convert’).click(function()
{
function hex2rgba_convert(hex,opacity){
hex = hex.replace(‘#’,”);
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);

result = ‘rgba(‘+r+’,’+g+’,’+b+’,’+opacity/100+’)’;
return result;
}
var color = $(‘#hexcolor’).val();
var opacity = $(‘#opacity’).val();
$(‘#result’).html(hex2rgba_convert(color,opacity));
return false;
});
});

Meks says:
March 9, 2016 at 2:55 pm
Good tip!
Thanks for sharing JS approach as well!

Thanks,

It’s awesome and it works

Meks says:
September 18, 2015 at 3:45 pm
You are so welcome! 🙂

This is very useful function and I am apply it in wordpress and amazing it is working. So thank you very much for sharing very useful function.

Nice! Am using this on Option-Tree’s new color picker with opacity, just released today. Very handy.

Meks says:
March 5, 2015 at 4:35 pm
Great to hear that John! Yes, we found this very handy in many cases too!

Well Done! Thank you!

super ……… 🙂

Thanks it was very Helpful!! Really Appreciate It!!

Thank you so much!
Great work.

This was pretty sweet. Thanks! I was using Chris Coyiers snippet prior at CSS Tricks, but found it was returning the array. I wound up having to convert, format and substr the ouptut after a foreach loop to get the results I wanted. This feels like a more fleshed out , so I’ll likely use this one down the road for sure. Thanks !

Saved my life with this. Great work, cheers!

Meks says:
September 18, 2015 at 3:46 pm
You are welcome! 🙂

Please improve for alpha=0

for full transparent value, its not working.
$color = #E6402A;
hex2rgba($color, 0); // fully transparent color

I expect this from above code
rgba(230, 64, 42, 0)

Thank you

Victor Hugo says:
February 23, 2015 at 5:44 pm
on your case u can change:
//Check if opacity is set(rgba or rgb)
if($opacity){
to
if($opacity!=false){
and pass 0 as argument
- Mike says:
  August 10, 2016 at 12:51 am
  Yes this an option. But update to
  if($opacity !== false){
  Sometimes you may need to make a gradient background that includes a opacity of zero so it will fade out. Therefore showing elements behind it or to overlay a background image for example.
  Thanks for the helper function.
Meks says:
March 5, 2015 at 4:34 pm
Full transparency won’t make any sense. I guess it is better to use background: transparent; style in that case…
- Boris Vasquez says:
  August 12, 2016 at 8:05 pm
  I Think the same as you, it’s very usefull when you want got get a non trasparent color. In such case use transparent color instead in your css.