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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /* 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* 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.'; } '; |
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.
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?
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;
});
});
Good tip!
Thanks for sharing JS approach as well!
Thanks,
It’s awesome and it works
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.
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!
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
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
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.
Full transparency won’t make any sense. I guess it is better to use background: transparent; style in that case…
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.
Hey, thanks so much! It’s exactly what I was searching for.
You are welcome! 🙂
Finally a RGBA to PHP converter that works well for me! Thank you!
Very nice!
It works, thank you so much!
You’re welcome! 🙂