8 Digit Hex Color code = RGBA

Whilst creating and modifying a theme recently I was needing the theme customizer to spit out an Alpha(opacity) color at a specific opacity via the customizer, I was presented with 4 Problems

1. Integrating an opacity slider onto the default wordpress color picker was choosing difficult SEE HERE.
2. I wanted the Opacity to be of a set value.
3. I wanted the client to be able to choose their selected color without losing the themes inherent design. so placing an rgba() into the stylesheet was out of the question as the editor would be turned off via the wp-config.php file
4. Adding opacity:0.5; to the elements background in the stylesheet made all its child elements also have that opacity.

So, it was by chance I came across this article on Chris Coyiers’ website regarding 8 digit hex codes and the opacity factor that they bring to the table. Although it is not fully cross browser compatable, it is available on Chrome, Firefox, Opera and Safari but not on ie(EVER) or Edge yet !
So this is how I tackled it, it may not be the correct way but it worked for me, if you have any improvements please comment below.

How I used it

//output.php

function cocina_css() {
	$handle = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
	$color_accent = get_theme_mod( 'cocina_accent_color', cocina_customizer_get_default_accent_color() );

//This is the Primary accent color parameters
	$css .= ( cocina_customizer_get_default_accent_color() !== $color_accent ) ? sprintf( '
		
		.front-page-3 .image-section .widget{



			background-color: %1$s80; //The 80 after the "%1$s" indicates a 50% opacity, a list of other transparencies are linked at the bottom of the article.



		}
		', $color_accent ) : '';

//customize.php
function cocina_customizer_get_default_accent_color() {
	return '#00000080';
}


	// Accent color.
	$wp_customize->add_setting(
		'cocina_accent_color',
		array(
			'default' => cocina_customizer_get_default_accent_color(),
		)
	);
	$wp_customize->add_control(
		new WP_Customize_Color_Control(
			$wp_customize,
			'cocina_accent_color',
			array(
				'description' => __( 'Change the color of the background', 'cocina' ),
				'label'       => __( 'Accent Color', 'cocina' ),
				'section'     => 'colors',
				'settings'    => 'cocina_accent_color',
			)
		)
	);

For other opacity/Alpha %’s you can see the list on the right(it’s LONG)
Hope this helps in some way?