How to use rgba color from theme customizer color picker

I’m creating a wordpress theme and in that I am using the theme customizer to allow users to change the accent color of my theme. Now everything is working fine but few of my elements need to have the color in rgba() and not hexadecimal.

I’ve searched around and found that there is no way to make the customizer color picker work with rgba(), but I’ve seen many themes allow that and would like to know how I can do it too, but I just kind a solution anywhere.

Please let me know if you know how to do this. Thank you very much and best regards.

This is the part of my code in which I assign the value I get from the color picker to the anchor tag.

wp.customize( 'tcx_link_color', function( value ) {
    value.bind( function( to ) {
        $( 'a' ).css( 'color', to );
    } );
});

1 Answer
1

Why exactly you want to represent it in RGBA where A means alpha channel (I guess)

I mean, hex does not support transparency, so if you want to convert it to RGB, you just need to convert from hex to decimal

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+','+1+')';

taken from http://jsfiddle.net/ekinertac/3Evx5/1/

this just converts every hex digit to decimal value.

Leave a Comment