This javascript/jQuery converts color and transparency options selected from a CMS configuration page and converts the values from hex to RGBA so the transparency option that was selected can work.

hexToRGBA.js

(function (context) {
    'use strict';
    var require = context.require;
    var requirejs = context.requirejs;
    var define = context.define;

    define(function (require) {
        //define any required libraries - see config.js for registered names
        var $ = require('jquery'),  //require jQuery
            util = require('lib/Util'),     //require util for $debug
            GlobalEventDispatcher = require('GlobalEventDispatcher'),
            GlobalResizeListener = require('GlobalResizeListener');

        var context = $getLayout();
        //output console message to main ?debug=corpJS section
        $debug('hexToRgbaTemplate loaded - use ?debug=hexToRgbaTemplate for messages');

        //require domReady - which fires callback upon DOM being ready to fire our module
        require(['domReady!'], function (doc) {
            /*Fires upon DOM Ready to initialize component*/
            $debug('**** Module Example Set Up Started **** ', 'hexToRgbaTemplate'); //syntax: $debug(message, urlParam);

            //look for any of our js-elements to perform actions on
            $('.js-hexToRgba').each(function (i,element) {
                //output debug message
                $debug('Found Example Element #' + (i + 1), 'hexToRgbaTemplate');

                //instantiate new object, passing the element in as a jQuery object
                new hexToRgba($(element));
            });

        });

       /**
         * This sets up scrollorama effects.
         *
         * @class hexToRgba
         * @param {jQuery} $element A reference to the containing DOM element
         * @constructor
         */
        var hexToRgba = function ($element) {

            /**
             * A reference to the containing DOM element
             *
             * @default null
             * @property $element
             * @type {jQuery}
             */
            this.$element = $element;   //store element as property of main object

            /**
             * Tracks whether component is enabled.
             *
             * @default false
             * @name isEnabled
             * @type bool
             */
            this.isEnabled = false;
             /**
             * The global instance of an event dispatcher, used to subscribe to or publish events of global interest
             *
             * @default GlobalResizeListener.getResizeListener()
             * @property GlobalResizeListener
             * @type {jQuery}
             */
            this.eventDispatcher = GlobalEventDispatcher.getEventDispatcher();
            this.globalResizeListener = GlobalResizeListener.getResizeListener();

            this.init(); //initialize component
        };

        /**
         * Initializes the UI Component View
         * Runs setOptions method, followed by enable/build method - chain additional ones if needed
         *
         * @method init
         * @returns {hexToRgba}
         * @private
         */
        hexToRgba.prototype.init = function () {
            this
                .setOptions()
                .build();
            
            return this;
        };

        /**
         * This sets the options via data-options in the html markup. If
         * the options aren't set it goes to the defaults.
         * Syntax for HTML should be data-options='{"exampleOption" : "bar", "enabled" : false, "xLength" : 45, "option2" : "foo"}'
         *
         * @method setOptions
         * @returns {hexToRgba}
         * @private
         */
        hexToRgba.prototype.setOptions = function () {
            var options = this.$element.data().options;
            var defaults = {
                borderColor: '',
                borderColorTransparency: '0%',
                borderBoxBackgroundColor: '',
                borderBoxBackgroundTransparency : '0%'
            };

            this.settings = $.extend({}, defaults, options);    //merge defaults with data-options object
            $debug('     hexToRgba Options ', 'hexToRgbaTemplate');
            return this;
        };
        hexToRgba.prototype.setupHandlers = function() {
            this.eventDispatcher.subscribe(GlobalEventDispatcher.EVENTS.CONTEXT_CHANGE, this.resizeCheck.bind(this));
            this.eventDispatcher.subscribe(GlobalEventDispatcher.EVENTS.WINDOW_RESIZE, this.resizeCheck.bind(this));
            return this;
        };
        hexToRgba.prototype.resizeCheck = function() {

            this.context = this.globalResizeListener.getCurrentContext();

            return this;

        };

        /**
         * Builds the component
         * Performs any event binding to handlers
         * Exits early if it is already enabled
         *
         * @method enable
         * @returns {hexToRgba}
         * @public
         */
        hexToRgba.prototype.build = function () {
            var self = this;
            //store entered hex value for background
            var hexValueBg = self.settings.borderBoxBackgroundColor;

            //check which opacity selected for background color
            var selectedTransBg = self.settings.borderBoxBackgroundTransparency;

            var opacityBg;

            $debug(' hexValueBg = ' + hexValueBg + ' selectedTransBg = '+ selectedTransBg, 'hexToRgbaTemplate');
           
            //sets background opacity based off what has been selected in content AT(these look backwards, thats just how opacity works)
            if(selectedTransBg === 'Default'){
                //0% transparancy
                opacityBg = 100;
            }
            if(selectedTransBg === '25%'){
                //25% transparancy
                opacityBg = 75;
            }
            if(selectedTransBg === '50%'){
                //50% transparancy
                opacityBg = 50;
            }
            if(selectedTransBg === '75%'){
                //70% transparancy 
                opacityBg = 25;
            }

           
            //re-usable function taking in hex value, opacity selection. Converts and combines them for background and border color
            function convertHex(hex,opacity){
                //remove hashtag
                hex = hex.replace('#','');
                //store rgb values
                var r = parseInt(hex.substring(0,2), 16);
                var g = parseInt(hex.substring(2,4), 16);
                var b = parseInt(hex.substring(4,6), 16);
                var result;
                //creates result for background color 
                if(opacity === opacityBg){
                    //store result
                    result = 'rgba('+r+','+g+','+b+','+opacityBg/100+')';
                }
               
                return result;
            }
            //call convertHex function and stores new converted value for background color
            var convertedColorBG = (convertHex(hexValueBg,opacityBg));

            this.setupHandlers();
            this.resizeCheck();
            if(this.context === 'mediumContext' || this.context === 'largeContext' || this.context === 'luxuryContext'){
                //apply converted background color to element
                this.$element.find('.MMM--IconicBackground' ).css('background-color', convertedColorBG);
                
                //logic for rICO-109-HeroBanner because its being difficult
                if($("div").hasClass("rICO-109-HeroBanner")){
                    this.$element.find('.MMM--IconicBackground').css('background-color', convertedColorBG);
                } 
            }
            this.newBorder();
        };
        hexToRgba.prototype.newBorder = function() {
            var self= this;
            //store entered hex value for border
            var hexValueBorder = self.settings.borderColor;
            //check which opacity selected for border color
            var selectedTransBorder = self.settings.borderColorTransparency;
            var opacityBorder;

            //sets border opacity based off what has been selected in content AT(these look backwards, thats just how opacity works)
            if(selectedTransBorder === 'Default'){
                //0% transparancy
                opacityBorder = 100;
            }
            if(selectedTransBorder === '25%'){
                //25% transparancy
                opacityBorder = 75;
            }
            if(selectedTransBorder === '50%'){
                //50% transparancy
                opacityBorder = 50;
            }
            if(selectedTransBorder === '75%'){
                //70% transparancy 
                opacityBorder = 25;
            }
            //re-usable function taking in hex value, opacity selection. Converts and combines them for background and border color
            function convertHex(hex,opacity){
                //remove hashtag
                hex = hex.replace('#','');
                //store rgb values
                var r = parseInt(hex.substring(0,2), 16);
                var g = parseInt(hex.substring(2,4), 16);
                var b = parseInt(hex.substring(4,6), 16);
                var result;
                //creates results for border color 
                if(opacity === opacityBorder){
                    //store result
                    result = 'rgba('+r+','+g+','+b+','+opacityBorder/100+')';
                }
                return result;
            }
            //call convertHex function and stores new converted value for border color
            var convertedColorBorder = (convertHex(hexValueBorder,opacityBorder));
            $debug(' hexValueBorder = '+ hexValueBorder + ' selectedTransBorder = '+ selectedTransBorder, 'hexToRgbaTemplate');
            this.setupHandlers();
            this.resizeCheck();
            if(this.context === 'mediumContext' || this.context === 'largeContext' || this.context === 'luxuryContext'){
                //apply converted border color to element
                this.$element.find('.MMM--heroCarouselButtonContainer, .rICO-110-HeroText .MMM--wysiwyg').css('border-color', convertedColorBorder);
                
                //logic for rICO-109-HeroBanner because its being difficult
                if($("div").hasClass("rICO-109-HeroBanner")){
                    this.$element.find('.MMM--heroCarouselButtonContainer').css('border-color',               convertedColorBorder);
                } 
            }
        };

    }); //end define

}(MMMRequire));