How to use color-rgba - 4 common examples

if ( ! colorVar ) {
			hex = window.getComputedStyle( document.documentElement )
				.getPropertyValue( hex.replace( 'var(', '' ).replace( ')', '' ) ) || '#fff'
		} else {
			// Do also for CSS variables with fallback values.
			hex = window.getComputedStyle( document.documentElement )
				.getPropertyValue( colorVar[ 0 ] ) || '#fff'
		}
	}

	hex = hex.replace( /#/, '' )

	if ( hex.length <= 4 ) {
		hex = hex.replace( /#?(.)(.)(.)/, '$1$1$2$2$3$3' )
	}
	const newColor = rgba( `#${ hex }ff` )
	newColor[ 3 ] = opacity !== null ? opacity : 1
	return `rgba(${ newColor.join( ', ' ) })`
}

addFilter( 'stackable.util.hex-to-rgba', 'stackable/global-colors', ( output, hexColor, opacity ) => {
	// Only do this for Stackable global colors.
	if ( ! hexColor.includes( '--stk-global-color' ) ) {
		return output
	}

	const colorVarID = hexColor.match( /--stk-global-color-(\S*?(?=,))/ )
	if ( colorVarID ) {
		const colorRegex = /( )(.*)/g

		// Get the fallback value of the global color.
		const colorMatch = hexColor.match( colorRegex )[ 0 ].trim().slice( 0, -1 )

		// If the fallback value is a hex, convert to rgba.
		if ( colorMatch && colorMatch[ 0 ] === '#' ) {
			const rgbaColor = rgba( colorMatch )
			if ( rgbaColor ) {
				rgbaColor.splice( 3, 1 )
				return `rgba(var(--stk-global-color-${ colorVarID[ 1 ] }-rgba, ${ rgbaColor.join( ', ' ) }), ${ opacity !== null ? opacity : 1 })`
			}
		}
	}

	return output
} )

color = window.getComputedStyle( document.documentElement )
						.getPropertyValue( colorVar[ 0 ] ) || '#fff'
				}
			} else {
				return _isDarkColor( color )
			}
		}

		// Add compatibility to rgb/rgba colors.
		if ( color.match( /^rgb/ ) ) {
			const rgbToHex = ( r, g, b ) => '#' + [ r, g, b ].map( x => {
				const hex = x.toString( 16 )
				return hex.length === 1 ? '0' + hex : hex
			} ).join( '' )

			const rgbaColor = rgba( color )
			rgbaColor.splice( 3, 1 )

			color = rgbToHex( ...rgbaColor )
		}

		color = color.replace( /#/g, '' )
		if ( color.length === 3 ) {
			color = color.replace( /(.)(.)(.)/, '$1$1$2$2$3$3' )
		}

		return _isDarkColor( `#${ color }` )
	} catch ( err ) {
		return false
	}
}

export const getRgb = hex => {
	const rgbColor = rgba( hex.match( /^#/ ) ? hex : `#${ hex }` )
	rgbColor.splice( 3, 1 )
	return rgbColor.join( ', ' )
}