diff --git a/gulpfile.js b/gulpfile.js
index 41cf7ba4b..10c836dfc 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -429,6 +429,18 @@ gulp.task('bootstrapCompile', function () {
   //  .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) );
 });
 
+// Bootstrap Compile
+gulp.task('colorPalettesCompile', function () {
+  gulp.src(config.dist + '/assets/scss/custom-color/color-palettes.scss')
+    .pipe(sass())
+    .pipe(sass.sync().on('error', sass.logError))
+    .pipe(gulp.dest(config.prime_dest + '/css' ) )
+    .pipe(cssnano({ discardComments: { removeAll: true }, safe: true }))
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest( config.prime_dest + '/css' ) )
+  //  .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) );
+});
+
 // Watch for changes and recompile scss
 gulp.task('sass:watch', function () {
 	gulp.watch( 'src/assets/scss/**/*.scss', function () {
@@ -554,7 +566,7 @@ gulp.task( 'build', function( cb ) {
 		['jsHint', 'jscs', 'frameworkJs', 'svgs', 'tgm'],
 		['scssDeps', 'jsDeps', 'modernizr', 'fontDeps', 'phpDeps', 'frameworkFiles', 'copyScss'],
 		'images',
-		['scssCompile', 'bootstrapCompile'],
+		['scssCompile', 'bootstrapCompile', 'colorPalettesCompile' ],
 		['fontFamilyCss', 'patterns'],
 		'hovers',
 		'hoverColors',
diff --git a/prime/inc/boldgrid-theme-framework-config/config.php b/prime/inc/boldgrid-theme-framework-config/config.php
index ec9198a4c..820647feb 100755
--- a/prime/inc/boldgrid-theme-framework-config/config.php
+++ b/prime/inc/boldgrid-theme-framework-config/config.php
@@ -220,7 +220,7 @@ function boldgrid_prime_framework_config( $config ) {
 
 		// Footer specific colors for background, headings, and links.
 		$config['customizer']['controls']['bgtfw_footer_color']['default'] = 'color-5';
-		$config['customizer']['controls']['bgtfw_footer_links']['default'] = 'color-1';
+		$config['customizer']['controls']['bgtfw_footer_link_color']['default'] = 'color-1';
 
 		// Page title display settings, show by default.
 		$config['customizer']['controls']['bgtfw_pages_title_display']['default'] = 'show';
diff --git a/src/assets/js/customizer/color-palette-generate.js b/src/assets/js/customizer/color-palette-generate.js
index 65f9945fd..408b67590 100644
--- a/src/assets/js/customizer/color-palette-generate.js
+++ b/src/assets/js/customizer/color-palette-generate.js
@@ -93,6 +93,138 @@ BOLDGRID.COLOR_PALETTE.Generate = BOLDGRID.COLOR_PALETTE.Generate || {};
 		'#1a1a1a'
 	];
 
+	/**
+	 * Css Variables.
+	 *
+	 * Generate CSS Variables for a color palette.
+	 *
+	 * @ since 2.20.0
+	 *
+	 * @param {object} colorPalette The Color Palette Object.
+	 *
+	 * @returns string CSS Variables string.
+	 */
+	self.cssVariables = function( colorPalette ) {
+		var css              = '',
+			formattedPalette = {};
+
+		$.each( colorPalette.colors, function( index, color ) {
+			var colorIndex = index + 1;
+
+			formattedPalette['color-' + colorIndex ] = color;
+		} );
+
+		formattedPalette['color-neutral'] = colorPalette['neutral-color'];
+
+		$.each( formattedPalette, function( variable, color ) {
+			css += `--${variable}: ${color};`;
+			css += `--${variable}-raw: ` + color.replace( 'rgb(', '' ).replace( ')', '' ) + ';';
+			css += `--${variable}-light:` + net.brehaut.Color( color ).lightenByAmount( 0.1 ).toCSS() + ';';
+			css += self.generateHoverVars( formattedPalette, variable, color );
+		} );
+
+		return css;
+	};
+
+	/**
+	 * Generates CSS Variables for hover colors.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {object} formattedPalette Formatted colors object.
+	 * @param {string} textVariable     Text color variable.
+	 * @param {string} textColor        Text color value.
+	 *
+	 * @returns {string} CSS Variables string.
+	 */
+	self.generateHoverVars = function( formattedPalette, textVariable, textColor ) {
+		var textIndex = textVariable.replace( 'color-', '' ),
+			hoverVars = '';
+
+		$.each( formattedPalette, function( bgVariable, bgColor ) {
+			var bgIndex    = bgVariable.replace( 'color-', '' ),
+				hoverColor = self.getHoverColor(
+					net.brehaut.Color( bgColor ),
+					net.brehaut.Color( textColor )
+				);
+
+				hoverVars += `--bg-${bgIndex}-text-${textIndex}-hover: ${hoverColor};`;
+		} );
+
+		return hoverVars;
+	};
+
+	/**
+	 * Get Hover Color.
+	 *
+	 * All the logic for determining the hover color was
+	 * derived from the SCSS functions defined prior to the
+	 * 2.2.0 release in the following file:
+	 *
+	 * src/assets/scss/custom-color/color-palettes.scss
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {Color} BgColor   Background Color object.
+	 * @param {Color} TextColor Text Color object.
+	 *
+	 * @returns {string} RGB Color value.
+	 */
+	self.getHoverColor = function( BgColor, TextColor ) {
+		var textLightness = TextColor.getLightness(),
+			bgLightness   = BgColor.getLightness(),
+			hoverColor;
+
+		// White Text
+		if ( 1 === textLightness ) {
+
+			// Dark Background
+			if ( 0.9 <= bgLightness ) {
+				hoverColor = BgColor.darkenByAmount( 0.15 );
+
+			// Light Background
+			} else {
+				hoverColor = BgColor.blend( TextColor, 0.8 );
+			}
+
+		// Black Text
+		} else if ( 0 === textLightness ) {
+
+			// Dark Background
+			if ( 0.10 > bgLightness ) {
+				hoverColor = BgColor.lightenByAmount( 0.2 );
+
+			// Light Background
+			} else {
+				hoverColor = BgColor.blend( TextColor, 0.6 );
+			}
+
+		// Light Text on Dark Background.
+		} else if ( bgLightness < textLightness ) {
+
+			// Color is too light to lighten.
+			if ( 0.9 < textLightness ) {
+				hoverColor = TextColor.darkenByAmount( 0.2 );
+			} else {
+				hoverColor = TextColor.lightenByAmount( 0.2 );
+			}
+
+		// Dark Text on Light Background.
+		} else {
+
+			// Color is too dark to darken.
+			if ( 0.15 > textLightness ) {
+				hoverColor = TextColor.lightenByAmount( 0.2 );
+			} else {
+				hoverColor = TextColor.darkenByAmount( 0.2 );
+			}
+		}
+
+		hoverColor = hoverColor.toRGB();
+
+		return 'rgb(' + Math.floor( hoverColor.red * 255 ) + ',' + Math.floor( hoverColor.green * 255 ) + ',' + Math.floor( hoverColor.blue * 255 ) + ')';
+	};
+
 	/**
 	 * Get a random color
 	 * Not Used ATM
diff --git a/src/assets/js/customizer/color-palette-preview.js b/src/assets/js/customizer/color-palette-preview.js
index 3fc25f70a..303b5db9a 100644
--- a/src/assets/js/customizer/color-palette-preview.js
+++ b/src/assets/js/customizer/color-palette-preview.js
@@ -22,6 +22,110 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
 		}
 	});
 
+	/**
+	 * Update CSS overlay colors.
+	 *
+	 * CSS Overlay colors are translucent background colors
+	 * added to elements using PPB. These are currently added using head inline CSS
+	 * since the PPB added this feature before we added the --color-x-raw variables.
+	 *
+	 * This method will update the inline CSS to use the --color-x-raw variables when
+	 * the palette is changed. However, in the future, we should update PPB to use
+	 * the --color-x-raw variables instead of inline CSS.
+	 *
+	 * @since 2.20.0
+	 */
+	self.updateOverlayColors = function() {
+		var $bgColorElements    = $( '[class*="-background-color"]' ),
+			$imgOverlayElements = $( '[data-bg-overlaycolor-class]' ),
+			$fwrElements        = $( '[class*="fwr-"]' ),
+			rawColorValues      = {
+				'color-1-raw': $( ':root' ).css( '--color-1-raw' ),
+				'color-2-raw': $( ':root' ).css( '--color-2-raw' ),
+				'color-3-raw': $( ':root' ).css( '--color-3-raw' ),
+				'color-4-raw': $( ':root' ).css( '--color-4-raw' ),
+				'color-5-raw': $( ':root' ).css( '--color-5-raw' ),
+				'color-neutral-raw': $( ':root' ).css( '--color-neutral-raw' ),
+			};
+
+		$bgColorElements.each( ( _, el ) => {
+			var $bgColorEl      = $( el ),
+				bgUuid          = $bgColorEl.attr( 'data-bg-uuid' ),
+				$fwrInlineStyle = $( `#${bgUuid}-inline-css` );
+
+			$fwrInlineStyle.each( ( _, el ) => {
+				self.updateBgColorOverlays( el, rawColorValues );
+			} );
+		} );
+
+		$imgOverlayElements.each( ( _, el ) => {
+			self.updateImageOverlays( el, rawColorValues );
+		} );
+
+		$fwrElements.each( ( _, el ) => {
+			var $fwr            = $( el ),
+				classList       = $fwr.attr( 'class' ),
+				fwrId           = 'fwr-' + classList.match( /fwr-?(\d+)/ )[1],
+				$fwrInlineStyle = $( `#${fwrId}-inline-css` );
+
+			$fwrInlineStyle.each( ( _, el ) => {
+				self.updateBgColorOverlays( el, rawColorValues );
+			} );
+		} );
+	};
+
+	/**
+	 * Updage Image Overlay colors.
+	 *
+	 * Elements that have a translucent color overlaying the
+	 * background image that uses a color from the palette,
+	 * has the background-image property set in the elements'
+	 * inline styles.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {object} el             Image overlay element.
+	 * @param {object} rawColorValues Raw color values.
+	 */
+	self.updateImageOverlays = function( el, rawColorValues ) {
+		var $el             = $( el ),
+			elStyle         = $el.attr( 'style' ),
+			colorIndex      = $el.attr( 'data-bg-overlaycolor-class' ),
+			overlayValue    = rawColorValues[`color-${colorIndex}-raw`],
+			overlayVariable = `var(--color-${colorIndex}-raw)`;
+
+		$el.attr(
+			'style',
+			elStyle.replace( new RegExp( overlayValue, 'g' ), overlayVariable )
+		);
+	};
+
+
+	/**
+	 * Update BG Color Overlays.
+	 *
+	 * Elements with a translucent background color
+	 * that uses a color from the palette, and does not
+	 * have a background image, has the background properties
+	 * set in the <head> inline style element. This handles
+	 * Full Width Rows as well.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param {object} inlineStyleEl  <head> inline style element.
+	 * @param {object} rawColorValues Raw color values.
+	 */
+	self.updateBgColorOverlays = function( inlineStyleEl, rawColorValues ) {
+		var $inlineStyleEl = $( inlineStyleEl ),
+			styleString    = $inlineStyleEl.html();
+
+		_.each( rawColorValues, ( colorRawValue, colorRawVariable ) => {
+			styleString = styleString.replace( new RegExp( colorRawValue, 'g' ), `var(--${colorRawVariable})` );
+		} );
+
+		$inlineStyleEl.html( styleString );
+	};
+
 	/**
 	 * Main responsibility of this file
 	 * The to parameter, is a json string that is inside of a textarea in the parent window
@@ -44,7 +148,11 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
 
 		// Update styles.
 		style = document.getElementById( 'boldgrid-color-palettes-inline-css' );
-		style.innerHTML = modify.compiled_css;
+		if ( style ) {
+			style.innerHTML = ':root{' + modify.css_variables + '}';
+		} else {
+			$( 'head' ).append( '<style id="boldgrid-color-palettes-inline-css" type="text/css">:root{' + modify.css_variables + '}</style>' );
+		}
 	};
 
 	/**
@@ -59,6 +167,9 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
 				.val( parent.BOLDGRID.COLOR_PALETTE.Modify.compiled_css )
 				.change();
 		} );
+
+		// Update overlay colors.
+		self.updateOverlayColors();
 	} );
 
 	wp.customize( 'boldgrid_compiled_css', function( value ) {
diff --git a/src/assets/js/customizer/color-palette.js b/src/assets/js/customizer/color-palette.js
index 2645abdb0..888c8c60a 100644
--- a/src/assets/js/customizer/color-palette.js
+++ b/src/assets/js/customizer/color-palette.js
@@ -1045,6 +1045,9 @@ BOLDGRID.COLOR_PALETTE.Modify = BOLDGRID.COLOR_PALETTE.Modify || {};
 	 * Change the palette settings
 	 */
 	colorPalette.update_palette_settings = function() {
+		colorPalette.css_variables       = BOLDGRID.COLOR_PALETTE.Generate.cssVariables( colorPalette.state.palettes['palette-primary'] );
+		colorPalette.state.css_variables = colorPalette.css_variables;
+
 		colorPalette.text_area_val = JSON.stringify({ 'state': colorPalette.state });
 		wp.customize( 'boldgrid_color_palette' ).set( '' ).set( colorPalette.text_area_val );
 	};
diff --git a/src/assets/js/customizer/color/preview.js b/src/assets/js/customizer/color/preview.js
index 86e6274c8..d51768d5f 100644
--- a/src/assets/js/customizer/color/preview.js
+++ b/src/assets/js/customizer/color/preview.js
@@ -49,9 +49,9 @@ export class Preview  {
 				properties: [ 'color', 'color-hover' ]
 			},
 			{
-				name: 'bgtfw_footer_links',
-				selector: '.footer-content:not(.template-footer)',
-				properties: [ 'link-color' ]
+				name: 'bgtfw_footer_link_color',
+				selector: '#colophon .bgtfw-footer.footer-content:not(.template-footer) .attribution-theme-mods > .link > a:not( .btn ):hover',
+				properties: [ 'color' ]
 			}
 		];
 	}
diff --git a/src/assets/js/customizer/customizer.js b/src/assets/js/customizer/customizer.js
index d4ff571dc..7baf2d56a 100644
--- a/src/assets/js/customizer/customizer.js
+++ b/src/assets/js/customizer/customizer.js
@@ -547,6 +547,10 @@ BOLDGRID.Customizer.Util.getInitialPalettes = function( option ) {
 			value.bind( function( to ) {
 				var palettes, colors;
 
+				if ( ! to ) {
+					to = parent.BOLDGRID.COLOR_PALETTE.Modify.text_area_val;
+				}
+
 				palettes = parent.jQuery( '.colors-wrapper' );
 				colors = BOLDGRID.Customizer.Util.getInitialPalettes( to );
 
diff --git a/src/assets/js/customizer/typography/link-preview.js b/src/assets/js/customizer/typography/link-preview.js
index 59b625d1c..927c4a70a 100644
--- a/src/assets/js/customizer/typography/link-preview.js
+++ b/src/assets/js/customizer/typography/link-preview.js
@@ -14,6 +14,7 @@ export class LinkPreview {
 		this.paletteSelector = new PaletteSelector();
 		this.prefixes = [
 			'bgtfw_body',
+			'bgtfw_footer',
 			'bgtfw_posts_date',
 			'bgtfw_posts_byline',
 			'bgtfw_posts_tags',
@@ -52,6 +53,10 @@ export class LinkPreview {
 					controls.push( `${prefix}_link_color_display` );
 				}
 
+				if ( 'bgtfw_footer' === prefix ) {
+					controls = [ `${prefix}_link_color` ];
+				}
+
 				api( ...controls, ( ...args ) => {
 					args.map( control => control.bind( () => this.updateStyles( prefix ) ) );
 				} );
@@ -83,13 +88,24 @@ export class LinkPreview {
 	updateStyles( prefix ) {
 		let css = '';
 		if ( false === _.isFunction( api( `${prefix}_link_color_display` ) ) || 'inherit' !== api( `${prefix}_link_color_display` )() ) {
-			let linkColor = this._getColor( `${prefix}_link_color`, true ),
-				linkColorHover = api( `${prefix}_link_color_hover` )() || 0,
-				decoration = this._getDecoration( `${prefix}_link_decoration` ),
+			let linkColor, linkColorHover, decoration, decorationHover, excludes, selectors, shiftedColorVal;
+			if ( 'bgtfw_footer' === prefix ) {
+				linkColor       = this._getColor( `${prefix}_link_color`, true ),
+				linkColorHover  = api( 'bgtfw_body_link_color_hover' )() || 0,
+				decoration      = this._getDecoration( 'bgtfw_body_link_decoration' ),
+				decorationHover = this._getDecoration( 'bgtfw_body_link_decoration_hover' ),
+				excludes        = '',
+				selectors       = this.selectors[ prefix ],
+				shiftedColorVal;
+			} else {
+				linkColor       = this._getColor( `${prefix}_link_color`, true ),
+				linkColorHover  = api( `${prefix}_link_color_hover` )() || 0,
+				decoration      = this._getDecoration( `${prefix}_link_decoration` ),
 				decorationHover = this._getDecoration( `${prefix}_link_decoration_hover` ),
-				excludes = '',
-				selectors = this.selectors[ prefix ],
+				excludes        = '',
+				selectors       = this.selectors[ prefix ],
 				shiftedColorVal;
+			}
 
 			linkColorHover = parseInt( linkColorHover, 10 ) / 100;
 
@@ -104,7 +120,7 @@ export class LinkPreview {
 					}
 					${selector}:hover,
 					${selector}:focus {
-						color: ${shiftedColorVal};
+						color: ${shiftedColorVal} !important;
 						text-decoration: ${decorationHover};
 					}
 				`;
@@ -115,14 +131,13 @@ export class LinkPreview {
 			 * controlled by the Site Content Link typography controls.
 			 */
 			if ( 'bgtfw_body' === prefix ) {
-				let footerLinkColor      = this._getColor( 'bgtfw_footer_links', true ),
-					footerLinkColorHover = api( `${prefix}_link_color_hover` )() || 0,
-					footerShiftedColorVal;
-
-				footerLinkColorHover  = parseInt( footerLinkColorHover, 10 ) / 100,
-				footerShiftedColorVal = colorLib.Color( footerLinkColor ).lightenByAmount( footerLinkColorHover ).toCSS();
+				let colorPaletteOption = api( 'boldgrid_color_palette' )();
 
-				let colorPaletteOption = JSON.parse( api( 'boldgrid_color_palette' )() );
+				if ( colorPaletteOption ) {
+					colorPaletteOption = JSON.parse( api( 'boldgrid_color_palette' )() );
+				} else {
+					colorPaletteOption = parent.BOLDGRID.COLOR_PALETTE.Modify;
+				}
 
 				let paletteColors  = colorPaletteOption.state.palettes['palette-primary'].colors;
 				let paletteNeutral = colorPaletteOption.state.palettes['palette-primary']['neutral-color'];
@@ -138,19 +153,8 @@ export class LinkPreview {
 						css += `.sidebar.color-${sidebarColorClass}-link-color a:not( .btn ):hover, .sidebar.color-${sidebarColorClass}-link-color a:not( .btn ):focus { color: ${sidebarAriColor} !important; }`;
 				} );
 
-				css += `
-				#colophon .bgtfw-footer.footer-content > a:not( .btn ),
-				#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ) {
-					text-decoration: ${decoration};
-				}
-				#colophon .bgtfw-footer.footer-content > a:not( .btn ):hover,
-				#colophon .bgtfw-footer.footer-content > a:not( .btn ):focus,
-				#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):hover,
-				#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):focus {
-						color: ${footerShiftedColorVal};
-						text-decoration: ${decorationHover};
-					}
-				`;
+				// footer Link Color.
+				this.updateStyles( 'bgtfw_footer' );
 			}
 		}
 
diff --git a/src/assets/scss/custom-color/color-classes.scss b/src/assets/scss/custom-color/color-palettes.scss
similarity index 50%
rename from src/assets/scss/custom-color/color-classes.scss
rename to src/assets/scss/custom-color/color-palettes.scss
index 2953a2b19..be78ec25e 100644
--- a/src/assets/scss/custom-color/color-classes.scss
+++ b/src/assets/scss/custom-color/color-palettes.scss
@@ -1,127 +1,54 @@
-@function hover($background, $color) {
-	$style: '';
-	$hover-color: '';
-	$color-lightness: abs(lightness($color));
-	$background-lightness: abs(lightness($background));
+$colors: ( var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5) );
 
-	@if $color-lightness == 100 {
-		/* White */
-		@if $background-lightness >= 90 {
-			$hover-color: darken($background, 15);
-		} @else {
-			$hover-color: mix($color, $background, 80);
-		}
-	} @else if $color-lightness == 0 {
-		/* Black */
-		@if $background-lightness < 10 {
-			$hover-color: lighten($background, 20);
-		} @else {
-			$hover-color: mix($color, $background, 60);
-		}
-	} @else if $background-lightness < $color-lightness {
-		/* Light text on dark background */
-		$style: 'lighten';
-		@if $color-lightness > 90 {
-			/* Color too light to lighten */
-			$hover-color: darken($color, 20);
-			$style: 'darken';
-		} @else {
-			$hover-color: lighten($color, 20);
-		}
-	} @else {
-		/* Dark text on light background */
-		$style: 'darken';
-		@if $color-lightness < 15 {
-			/* Color is too dark to further darken */
-			$hover-color: lighten($color, 20);
-			$style: 'lighten';
-		} @else {
-			$hover-color: darken($color, 20);
-		}
-	}
-
-	@return $hover-color;
-}
+$palette-primary_1: var(--color-1);
+$palette-primary_2: var(--color-2);
+$palette-primary_3: var(--color-3);
+$palette-primary_4: var(--color-4);
+$palette-primary_5: var(--color-5);
+$palette-primary-neutral-color: var(--color-neutral);
 
 $ubtn-colors: ();
-@if variable-exists( palette-primary_1 ) {
-	$ubtn-colors: append($ubtn-colors,('color-1' $palette-primary_1 var(--color-1-text-contrast)));
-	@if $ubtn-theme-color == 'palette-primary_1' {
-		$ubtn-bgcolor: $palette-primary_1;
-		$ubtn-font-color: var(--color-1-text-contrast);
-	}
-}
-@if variable-exists( palette-primary_2  ) {
-	$ubtn-colors: append($ubtn-colors,('color-2' $palette-primary_2 var(--color-2-text-contrast)));
-	@if $ubtn-theme-color == 'palette-primary_2' {
-		$ubtn-bgcolor: $palette-primary_2;
-		$ubtn-font-color: var(--color-2-text-contrast);
-	}
-}
-@if variable-exists( palette-primary_3 ) {
-	$ubtn-colors: append($ubtn-colors,('color-3' $palette-primary_3 var(--color-3-text-contrast)));
-	@if $ubtn-theme-color == 'palette-primary_3' {
-		$ubtn-bgcolor: $palette-primary_3;
-		$ubtn-font-color: var(--color-3-text-contrast);
-	}
-}
-@if variable-exists( palette-primary_4 ) {
-	$ubtn-colors: append($ubtn-colors,('color-4' $palette-primary_4 var(--color-4-text-contrast)));
-	@if $ubtn-theme-color == 'palette-primary_4' {
-		$ubtn-bgcolor: $palette-primary_4;
-		$ubtn-font-color: var(--color-4-text-contrast);
-	}
-}
-@if variable-exists( palette-primary_5 ) {
-	$ubtn-colors: append($ubtn-colors,('color-5' $palette-primary_5 var(--color-5-text-contrast)));
-	@if $ubtn-theme-color == 'palette-primary_5' {
-		$ubtn-bgcolor: $palette-primary_5;
-		$ubtn-font-color: var(--color-5-text-contrast);
-	}
-}
-@if variable-exists( palette-primary-neutral-color ) {
-	$ubtn-colors: append($ubtn-colors,('neutral-color' $palette-primary-neutral-color var(--color-neutral-text-contrast)));
-	@if $ubtn-theme-color == 'palette-primary-neutral-color' {
-		$ubtn-bgcolor: $palette-primary-neutral-color;
-		$ubtn-font-color: var(--color-neutral-text-contrast);
-	}
-}
 
-@if variable-exists( palette-primary-transparent-color ) {
-	$ubtn-colors: append($ubtn-colors,('transparent-color' $palette-primary-transparent-color var(--color-neutral-text-contrast)));
-	@if $ubtn-theme-color == 'palette-primary-transparent-color' {
-		$ubtn-bgcolor: $palette-primary-transparent-color;
-		$ubtn-font-color: var(--color-neutral-text-contrast);
-	}
-}
+$ubtn-colors: append($ubtn-colors,('color-1' var( --color-1 ) var(--color-1-text-contrast) var( --color-1-light ) var( --color-1-dark ) ));
+
+$ubtn-colors: append($ubtn-colors,('color-2' var( --color-2 ) var(--color-2-text-contrast) var( --color-2-light ) var( --color-2-dark )));
+
+$ubtn-colors: append($ubtn-colors,('color-3' var( --color-3 ) var(--color-3-text-contrast) var( --color-3-light ) var( --color-3-dark )));
+
+$ubtn-colors: append($ubtn-colors,('color-4' var( --color-4 ) var(--color-4-text-contrast) var( --color-4-light ) var( --color-4-dark )));
+
+$ubtn-colors: append($ubtn-colors,('color-5' var( --color-5 ) var(--color-5-text-contrast) var( --color-5-light ) var( --color-5-dark )));
+
+$ubtn-colors: append($ubtn-colors,('neutral-color' var( --color-neutral ) var(--color-neutral-text-contrast) var( --color-neutral-light ) var( --color-neutral-dark )));
+
 
 /* Create single css classes to apply palettes on universal elements. */
 $names: background background-color;
 .sidebar.transparent-background-color {
 	@for $color from 1 through length( $colors ) {
 		@for $each from 1 through length( $colors ) {
-			$reference: nth($colors, $color);
+			$reference: var(--color-#{$color});
 			&.color-#{$each}-link-color {
 				a:not( .btn ) {
-					color: #{nth($colors, $each)};
+					color: var(--color-#{$each});
 				}
 			}
 		}
 		@if variable-exists( palette-primary-neutral-color ) {
 			&.color-neutral-link-color {
 				a:not( .btn ) {
-					color: $palette-primary-neutral-color;
+					color: var(--color-neutral);
 				}
 			}
 			&.color-neutral-sub-link-color.sm {
 				ul.sub-menu:not( .custom-sub-menu ) {
 					li.menu-item {
 						> a:not(.btn) {
-							color: $palette-primary-neutral-color;
+							color: var(--color-neutral);
 						}
 						> a:not(.btn) {
 							&:hover, &:focus, &:active, &.highlighted {
-								color: hover( nth($colors, $color), $palette-primary-neutral-color );
+								color: var(--bg-#{$color}-text-neutral-hover);
 							}
 						}
 					}
@@ -130,25 +57,25 @@ $names: background background-color;
 		}
 		&-hover {
 			&:focus, &:hover {
-				background-color: nth($colors, $color) ! important;
+				background-color: var(--color-#{$color}) ! important;
 			}
 		}
 	}
 }
 @for $i from 1 through length( $names ) {
 	@for $color from 1 through length( $colors ) {
-		$reference: nth($colors, $color);
+		$reference: var(--color-#{$color});
 		.color#{$color}-#{nth( $names, $i )} {
 			@for $each from 1 through length( $colors ) {
 				&.color-#{$each}-link-color {
 					li.menu-item:not( .custom-sub-menu ),
 					.attribution-theme-mods .link {
 						> a:not( .btn ) {
-							color: #{nth($colors, $each)};
+							color: var(--color-#{$each});
 						}
 						> a:not( .btn ) {
 							&:hover, &:focus, &:active, &.highlighted {
-								color: hover( nth($colors, $color), nth($colors, $each) );
+								color: var(--bg-#{$color}-text-#{$each}-hover);
 							}
 						}
 					}
@@ -159,11 +86,11 @@ $names: background background-color;
 				&.panel-footer {
 					&.color-#{$each}-link-color {
 						a:not( .btn ) {
-							color: #{nth($colors, $each)};
+							color: var(--color-#{$each});
 						}
 						> a:not( .btn ) {
 							&:hover, &:focus, &:active, &.highlighted {
-								color: hover( nth($colors, $color), nth($colors, $each) );
+								color: var(--bg-#{$color}-text-#{$each}-hover);
 							}
 						}
 					}
@@ -171,7 +98,7 @@ $names: background background-color;
 				&.sidebar {
 					&.color-#{$each}-link-color {
 						a:not( .btn ) {
-							color: #{nth($colors, $each)};
+							color: var(--color-#{$each});
 						}
 					}
 				}
@@ -189,11 +116,11 @@ $names: background background-color;
 						}
 						li.menu-item:not( .custom-sub-menu ) {
 							> a:not(.btn) {
-								color: #{nth($colors, $each)};
+								color: var(--color-#{$each});
 							}
 							> a:not(.btn) {
 								&:hover, &:focus, &:active, &.highlighted {
-									color: hover( nth($colors, $color), nth($colors, $each) );
+									color: var(--bg-#{$color}-text-#{$each}-hover);
 								}
 							}
 						}
@@ -201,9 +128,9 @@ $names: background background-color;
 							&.color-#{$subeach}-sub-link-color {
 								li.menu-item:not( .custom-sub-menu ) {
 									ul.sub-menu:not( .custom-sub-menu ) > a:not(.btn) {
-										color: #{nth($colors, $subeach)};
+										color: var(--color-#{$subeach});
 										&:hover, &:focus, &:active, &.highlighted {
-											color: hover( nth($colors, $subeach), nth($colors, $subeach) );
+											color: var(--bg-#{$color}-text-#{$subeach}-hover);							
 										}
 									}
 								}
@@ -216,9 +143,9 @@ $names: background background-color;
 				&.color-neutral-link-color {
 					a {
 						&:not( .in-mega ):not( .btn ) {
-							color: $palette-primary-neutral-color;
+							color: var(--color-neutral);
 							&:hover, &:focus, &:active, &.highlighted {
-								color: hover( nth($colors, $color), $palette-primary-neutral-color );
+								color: var(--bg-#{$color}-text-neutral-hover);
 							}
 						}
 					}
@@ -227,9 +154,9 @@ $names: background background-color;
 					ul.sub-menu:not( .custom-sub-menu ) {
 						li.menu-item:not( .custom-sub-menu ) {
 							> a:not(.btn) {
-								color: $palette-primary-neutral-color;
+								color: var(--color-neutral);
 								&:hover, &:focus, &:active, &.highlighted {
-									color: hover( nth($colors, $color), $palette-primary-neutral-color );
+									color: var(--bg-#{$color}-text-neutral-hover);
 								}
 							}
 						}
@@ -240,9 +167,9 @@ $names: background background-color;
 						ul.sub-menu:not( .custom-sub-menu ) {
 							li.menu-item:not( .custom-sub-menu ) {
 								> a:not(.btn) {
-									color: #{nth($colors, $subEach)};
+									color: var(--color-#{$subEach});
 									&:hover, &:focus, &:active, &.highlighted {
-										color: hover( nth($colors, $color), nth($colors, $subEach) );
+										color: var(--bg-#{$color}-text-#{$subEach}-hover);
 									}
 								}
 							}
@@ -262,11 +189,11 @@ $names: background background-color;
 			@for $each from 1 through length( $colors) {
 				&.color-#{$each}-link-color {
 					a {
-						color: #{nth($colors, $each)};
+						color: var(--color-#{$each});
 					}
 					&:not( .sidebar ) {
 						a:hover, a:focus, a:active, a.highlighted {
-							color: hover( $palette-primary-neutral-color, nth($colors, $each) );
+							color: var(--bg-neutral-text-#{$each}-hover);
 						}
 					}
 				}
@@ -274,9 +201,9 @@ $names: background background-color;
 					ul.sub-menu:not( .custom-sub-menu ) {
 						li.menu-item:not( .custom-sub-menu ) {
 							> a:not(.btn) {
-								color: #{nth($colors, $each)};
+								color: var(--color-#{$each});
 								&:hover, &:focus, &:active, &.highlighted {
-									color: hover( $palette-primary-neutral-color, nth($colors, $each) );
+									color: var(--bg-neutral-text-#{$each}-hover);
 								}
 							}
 						}
@@ -285,19 +212,19 @@ $names: background background-color;
 			}
 			&.color-neutral-link-color {
 				a {
-					color: $palette-primary-neutral-color;
+					color: var(--color-neutral);
 				}
 				a:hover, a:focus, a:active, a.highlighted {
-					color: hover( $palette-primary-neutral-color, $palette-primary-neutral-color );
+					color: var(--bg-neutral-text-neutral-hover);
 				}
 			}
 			&.color-neutral-sub-link-color.sm {
 				ul.sub-menu:not( .custom-sub-menu ) {
 					li.menu-item:not( .custom-sub-menu ) {
 						> a:not(.btn) {
-							color: $palette-primary-neutral-color;
+							color: var(--color-neutral);
 							&:hover, &:focus, &:active, &.highlighted {
-								color: hover( $palette-primary-neutral-color, $palette-primary-neutral-color );
+								color: var(--bg-neutral-text-neutral-hover);
 							}
 						}
 					}
@@ -317,8 +244,11 @@ $names: background background-color;
 	@each $ubtn-color in $ubtn-colors {
 		$ubtn-name: nth($ubtn-color, 1);
 		$ubtn-background: nth($ubtn-color, 2);
+		$ubtn-bg-light: nth($ubtn-color, 4);
+		$ubtn-bg-dark: nth($ubtn-color, 5);
 		$ubtn-color: nth($ubtn-color, 3);
 
+
 		// Crete class for .button-primary
 		// and legacy flat .button-primary-flat
 		.btn-#{$ubtn-name},
@@ -328,6 +258,12 @@ $names: background background-color;
 			background-color: $ubtn-background !important;
 			border-color: $ubtn-background;
 			color: $ubtn-color;
+			&.btn-raised {
+				background: linear-gradient( $ubtn-background, $ubtn-bg-light ) !important;
+				&:hover, &:focus {
+					background: linear-gradient( $ubtn-bg-light, $ubtn-background ) !important;
+				}
+			}
 			a {
 				color: $ubtn-color;
 			}
@@ -341,8 +277,8 @@ $names: background background-color;
 
 			&:hover,
 			&:focus {
-				background-color: lighten($ubtn-background, 10%) !important;
-				border-color: lighten($ubtn-background, 10%);
+				background-color: $ubtn-bg-light !important;
+				border-color: $ubtn-bg-light;
 				color: $ubtn-color;
 				a {
 					color: $ubtn-color;
@@ -352,9 +288,9 @@ $names: background background-color;
 			&:active,
 			&.active,
 			&.is-active {
-				background-color: desaturate($ubtn-background, 10%) !important;
-				border-color: desaturate($ubtn-background, 10%);
-				color: darken($ubtn-background, 10%);
+				background-color: $ubtn-bg-light !important;
+				border-color: $ubtn-bg-light;
+				color: $ubtn-color;
 				a {
 					color: $ubtn-color;
 				}
@@ -373,13 +309,13 @@ $names: background background-color;
 			&:hover,
 			&:focus {
 				&.btn-transparent{
-					background-color: lighten($ubtn-background, 10%) !important;
+					background-color: $ubtn-bg-light !important;
 					color: $ubtn-color;
 					a {
 						color: $ubtn-color;
 					}
 				}
-				border-color: lighten($ubtn-background, 10%) !important;
+				border-color: $ubtn-bg-light !important;
 
 			}
 
@@ -387,13 +323,13 @@ $names: background background-color;
 			&.active,
 			&.is-active {
 				&.btn-transparent{
-					background-color: lighten($ubtn-background, 10%) !important;
-					color: darken($ubtn-background, 10%);
+					background-color: $ubtn-bg-light !important;
+					color: $ubtn-color;
 					a {
 						color: $ubtn-color;
 					}
 				}
-				border-color: desaturate($ubtn-background, 10%) !important;
+				border-color: $ubtn-bg-light !important;
 			}
 		}
 	}
diff --git a/src/assets/scss/customizer/controls/_link-colors.scss b/src/assets/scss/customizer/controls/_link-colors.scss
index 9ae72f800..bbc39ce5f 100644
--- a/src/assets/scss/customizer/controls/_link-colors.scss
+++ b/src/assets/scss/customizer/controls/_link-colors.scss
@@ -1,7 +1,7 @@
 [id^="customize-control-bgtfw_"] {
 	&[id$="_link_color"],
 	&[id$="_link_color_display"] {
-		&:not( [id$="_link_color_display"] ),
+		&:not( [id$="_link_color_display"] ):not( [id$="_footer_link_color"] ),
 		~ [id$="_link_color"],
 		~ [id$="_link_color_hover"],
 		~ [id$="_link_decoration"],
@@ -22,7 +22,7 @@
 			padding-bottom: 12px;
 			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 		}
-		&[id$="_link_color"] {
+		&[id$="_link_color"]:not( [id$="_footer_link_color"] ) {
 			border-top: 1px solid rgba(0, 0, 0, 0.1);
 		}
 		&[id$="_link_color_display"] + &[id$="_link_color"] {
diff --git a/src/includes/class-boldgrid-framework-api.php b/src/includes/class-boldgrid-framework-api.php
index eeb0896ed..6ef900109 100644
--- a/src/includes/class-boldgrid-framework-api.php
+++ b/src/includes/class-boldgrid-framework-api.php
@@ -371,7 +371,7 @@ public function inner_footer_classes( $classes ) {
 			$classes = array_merge(
 				$classes,
 				$this->get_background_color( 'bgtfw_footer_color' ),
-				$this->get_link_color( 'bgtfw_footer_links' )
+				$this->get_link_color( 'bgtfw_footer_link_color' )
 			);
 		}
 
diff --git a/src/includes/class-boldgrid-framework-compile-colors.php b/src/includes/class-boldgrid-framework-compile-colors.php
index 718b11f99..23d9ac83f 100644
--- a/src/includes/class-boldgrid-framework-compile-colors.php
+++ b/src/includes/class-boldgrid-framework-compile-colors.php
@@ -172,9 +172,189 @@ public function get_scss_variables() {
 			$color_variables['ubtn-font-color'] = '$text-contrast-' . get_theme_mod( 'boldgrid_palette_class', 'palette-primary' ) . '_' . $this->get_button_default_color() . ';';
 			$color_variables['ubtn-theme-color'] = get_theme_mod( 'boldgrid_palette_class', 'palette-primary' ) . '_' . $this->get_button_default_color() . ';';
 		}
+
 		return $color_variables;
 	}
 
+	/**
+	 * Generate SCSS variables for Hover Colors.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param array  $formatted_palette Array of formatted palette colors.
+	 * @param string $text_color_name   Property to generate hover colors for.
+	 * @param string $text_color_value  Value of color.
+	 *
+	 * @return string $scss_variables  SCSS variables for hover colors.
+	 */
+	public function generate_hover_variables( $formatted_palette, $text_color_name, $text_color_value ) {
+		$hover_variables    = '';
+		$text_index         = str_replace( 'color-', '', $text_color_name );
+		$text_rgba_array    = $this->get_rgb_array( $text_color_value );
+		$light_hsla_array   = $this->rgba_to_hsla( $text_rgba_array, 10 );
+		$lighter_hsla_array = $this->rgba_to_hsla( $text_rgba_array, 20 );
+		$dark_hsla_array    = $this->rgba_to_hsla( $text_rgba_array, -10 );
+		$darker_hsla_array  = $this->rgba_to_hsla( $text_rgba_array, -20 );
+
+		foreach ( $formatted_palette as $bg_color_name => $bg_color_value ) {
+			$bg_index    = str_replace( 'color-', '', $bg_color_name );
+			$hover_color = $this->get_hover_color(
+				$this->normalize( $bg_color_value ),
+				$this->normalize( $text_color_value )
+			);
+			$hover_variables .= "--bg-$bg_index-text-$text_index-hover: $hover_color;";
+		}
+
+		return $hover_variables;
+	}
+
+	/**
+	 * Get the hover color for a given background and text color.
+	 *
+	 * All the logic for determining the hover color was
+	 * derived from the SCSS functions defined prior to the
+	 * 2.2.0 release in the following file:
+	 *
+	 * src/assets/scss/custom-color/color-palettes.scss
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param string $bg_color_value  Background color value.
+	 * @param string $text_color_value Text color value.
+	 *
+	 * @return string $hover_color    Hover color.
+	 */
+	public function get_hover_color( $bg_color_value, $text_color_value ) {
+		$text_lightness = intval( $this->get_luminance( $text_color_value ) );
+		$bg_lightness   = intval( $this->get_luminance( $bg_color_value ) );
+		$bg_rgb_array   = $this->get_rgb_array( $bg_color_value );
+		$text_rgb_array = $this->get_rgb_array( $text_color_value );
+
+		if ( 100 === $text_lightness ) {
+			// White text.
+			if ( 90 <= $bg_lightness ) {
+				// Light background.
+				$hover_color = $this->hsla_array_to_string(
+					$this->rgba_to_hsla( $bg_rgb_array, -15 )
+				);
+			} else {
+				// Dark background.
+				$hover_color = $this->rgba_array_to_string(
+					$this->mix_rbg_colors( $text_rgb_array, $bg_rgb_array, 0.8 )
+				);
+			}
+		} elseif ( 0 === $text_lightness ) {
+			// Black text.
+			if ( 10 > $bg_lightness ) {
+				// Dark background.
+				$hover_color = $this->hsla_array_to_string(
+					$this->rgba_to_hsla( $bg_rgb_array, 20 )
+				);
+			} else {
+				// Light background.
+				$hover_color = $this->rgba_array_to_string(
+					$this->mix_rbg_colors( $text_rgb_array, $bg_rgb_array, 0.6 )
+				);
+			}
+		} elseif ( $bg_lightness < $text_lightness ) {
+			// Light text on dark background.
+			if ( 90 < $text_lightness ) {
+				// Color to light to lighten.
+				$hover_color = $this->hsla_array_to_string(
+					$this->rgba_to_hsla( $text_rgb_array, -20 )
+				);
+			} else {
+				// Dark background.
+				$hover_color = $this->hsla_array_to_string(
+					$this->rgba_to_hsla( $text_rgb_array, 20 )
+				);
+			}
+		} else {
+			// Dark text on light background.
+			if ( 15 > $text_lightness ) {
+				// Color is too dark to darken.
+				$hover_color = $this->hsla_array_to_string(
+					$this->rgba_to_hsla( $text_rgb_array, 20 )
+				);
+			} else {
+				$hover_color = $this->hsla_array_to_string(
+					$this->rgba_to_hsla( $text_rgb_array, -20 )
+				);
+			}
+		}
+
+		return $hover_color;
+	}
+
+	/**
+	 * RGBA array to string.
+	 *
+	 * Convert an RGBA array to a formatted string.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param array $rgba_array RGBA array.
+	 *
+	 * @return string $rgba_string RGBA string.
+	 */
+	public function rgba_array_to_string( $rgba_array ) {
+		$r = $rgba_array[0];
+		$g = $rgba_array[1];
+		$b = $rgba_array[2];
+		$a = isset( $rgba_array[3] ) ? $rgba_array[3] : 1;
+
+		$rgba_string = 'rgba(' . $r . ',' . $g . ',' . $b . ',' . $a . ')';
+		return $rgba_string;
+	}
+
+	/**
+	 * HSLA array to string.
+	 *
+	 * Convert an HSLA array to a formatted string.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param array $hsla_array HSLA array.
+	 *
+	 * @return string $hsla_string HSLA string.
+	 */
+	public function hsla_array_to_string( $hsla_array ) {
+		$h = $hsla_array[0];
+		$s = $hsla_array[1];
+		$l = $hsla_array[2];
+		$a = isset( $hsla_array[3] ) ? $hsla_array[3] : 1;
+
+		$hsla_string = 'hsla(' . $h . ',' . $s . ',' . $l . ',' . $a . ')';
+		return $hsla_string;
+	}
+
+	/**
+	 * Mix Two RGB Colors.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param array $color_1 RGB Color 1.
+	 * @param array $color_2 RGB Color 2.
+	 * @param float $weight  Mix Weight.
+	 *
+	 * @return array $mixed_color Mixed Color.
+	 */
+	public function mix_rbg_colors( $color_1 = array( 0, 0, 0 ), $color_2 = array( 0, 0, 0 ), $weight = 0.5 ) {
+		$f = function ( $x ) use ( $weight ) {
+			return $weight * $x;
+		};
+
+		$g = function ( $x ) use ( $weight ) {
+			return ( 1 - $weight ) * $x;
+		};
+
+		$h = function ( $x, $y ) {
+			return round( $x + $y );
+		};
+
+		return array_map( $h, array_map( $f, $color_1 ), array_map( $g, $color_2 ) );
+	}
+
 	/**
 	 * Converts a hex color into an array of RGB.
 	 *
@@ -334,7 +514,7 @@ public function get_button_default_color() {
 	 */
 	public function get_button_color_files( $files ) {
 		$s = $this->configs['components']['buttons']['variables'];
-		$path = $this->configs['customizer-options']['colors']['settings']['scss_directory']['framework_dir'] . '/buttons/';
+		$path = $this->configs['framework']['asset_dir'] . 'scss/custom-color/buttons/';
 		$configs = array();
 		// Build an array of button-classes that are needed.
 		if ( ! empty( $s['button-primary-classes'] ) ) {
@@ -424,6 +604,82 @@ public function normalize( $color ) {
 		return $normalized;
 	}
 
+	/**
+	 * Get RGB(A) Array from rgb or rgba string.
+	 *
+	 * Returns an array of R,G,B,A values from a string.
+	 *
+	 * @since 2.20.0
+	 */
+	public function get_rgb_array( $color ) {
+		$rgba_string = $this->normalize( $color );
+		$rgba_string = str_replace( 'rgba(', '', $rgba_string );
+		$rgba_string = str_replace( ')', '', $rgba_string );
+
+		$rgba = explode( ',', $rgba_string );
+		return $rgba;
+	}
+
+	/**
+	 * Convert RGBA to HSLA.
+	 *
+	 * @since 2.20.0
+	 *
+	 * @param array $rgba_array        Array of RGBA values.
+	 * @param int   $luminosity_adjust Luminosity to adjust (optional).
+	 *
+	 * @return array $hsla_array         HSLA array.
+	 */
+	public function rgba_to_hsla( $rgba_array, $luminosity_adjust = 0 ) {
+		$r = intval( $rgba_array[0] );
+		$g = intval( $rgba_array[1] );
+		$b = intval( $rgba_array[2] );
+		$a = isset( $rgba_array[3] ) ? intval( $rgba_array[3] ) : 1;
+
+		$r /= 255;
+		$g /= 255;
+		$b /= 255;
+
+		$max = max( $r, $g, $b );
+		$min = min( $r, $g, $b );
+
+		$h;
+		$s;
+		$l = ( $max + $min ) / 2;
+		$d = $max - $min;
+
+		// If difference is 0, then it's a shade of grey.
+		if ( 0 == $d ) {
+			$h = 0;
+			$s = 0;
+		} else {
+			$s = $d / ( 1 - abs( 2 * $l - 1 ) );
+			switch ( $max ) {
+				case $r:
+					$h = 60 * fmod( ( ( $g - $b ) / $d ), 6 );
+						if ( $b > $g ) {
+							$h += 360;
+						}
+					break;
+
+				case $g:
+					$h = 60 * ( ( $b - $r ) / $d + 2 );
+					break;
+
+				case $b:
+					$h = 60 * ( ( $r - $g ) / $d + 4 );
+					break;
+			}
+		}
+
+		return array(
+			round( $h, 2 ),
+			round( $s, 2 ) * 100 . '%',
+			( round( $l, 2 ) * 100 ) + $luminosity_adjust . '%',
+			$a,
+		);
+	}
+
 	/**
 	 * Get color class associated with a color passed in.
 	 *
diff --git a/src/includes/class-boldgrid-framework-links.php b/src/includes/class-boldgrid-framework-links.php
index 84d677ff6..d03a38186 100644
--- a/src/includes/class-boldgrid-framework-links.php
+++ b/src/includes/class-boldgrid-framework-links.php
@@ -56,6 +56,15 @@ public function __construct( $configs ) {
 		'.template-sticky-header a:not(.btn)',
 	);
 
+	/**
+	 * Footer Link Selectors.
+	 *
+	 * @var array
+	 */
+	public static $footer_link_selectors = array(
+		'#colophon .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn )',
+	);
+
 	/**
 	 * Selectors to use for edit vars.
 	 *
@@ -162,8 +171,19 @@ public function get_styles( $prefix ) {
 				}
 
 				if ( 'bgtfw_body' === $prefix ) {
-					$footer_link_color  = explode( ':', get_theme_mod( 'bgtfw_footer_links' ) )[1];
-					$footer_ari_color   = ariColor::newColor( $color );
+					/**
+					 * The footer link theme mod name was changed from
+					 * 'bgtfw_footer_links' to 'bgtfw_footer_link_color' in
+					 * 2.20.0, so we need to check for both to ensure backwards compatibility.
+					 */
+					$footer_link_color  = explode(
+						':',
+						get_theme_mod(
+							'bgtfw_footer_link_color',
+							get_theme_mod( 'bgtfw_footer_links' )
+						)
+					)[1];
+					$footer_ari_color   = ariColor::newColor( $footer_link_color );
 					$footer_color_hover = get_theme_mod( "${prefix}_link_color_hover" ) ?: 0;
 					$footer_lightness   = min( $footer_ari_color->lightness + $footer_color_hover, 100 );
 					$footer_lightness   = max( $footer_lightness, 0 );
@@ -180,8 +200,8 @@ public function get_styles( $prefix ) {
 						$css .= ".sidebar.color-${sidebar_color_class}-link-color a:not( .btn ):hover, .sidebar.color-${sidebar_color_class}-link-color a:not( .btn ):focus { color: ${sidebar_color_hover} !important; }";
 					}
 
-					$css .= "#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ) { text-decoration: ${decoration};}";
-					$css .= "#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):hover, .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):focus {color: ${footer_color_hover};text-decoration: ${decoration_hover};}";
+					$css .= "#colophon .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn ) { text-decoration: ${decoration};}";
+					$css .= "#colophon .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn ):hover, .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn ):focus {color: ${footer_color_hover};text-decoration: ${decoration_hover};}";
 				}
 			}
 		}
diff --git a/src/includes/class-boldgrid-framework-styles.php b/src/includes/class-boldgrid-framework-styles.php
index 7acb485bb..cbeb138ad 100644
--- a/src/includes/class-boldgrid-framework-styles.php
+++ b/src/includes/class-boldgrid-framework-styles.php
@@ -303,20 +303,13 @@ public function enqueue_colors( $deps = array() ) {
 			$inline_override = true === $this->configs['framework']['inline_styles'];
 			$is_changeset = ! empty( $_REQUEST['customize_changeset_uuid'] ) && ! is_customize_preview();
 
-			if ( $inline_override || $is_changeset || is_customize_preview() ) {
-				wp_register_style( $handle, false );
-				wp_enqueue_style( $handle );
-				$css = get_theme_mod( 'boldgrid_compiled_css', '' );
-				wp_add_inline_style( $handle, $css );
-			} else {
-				wp_register_style(
-					$handle,
-					Boldgrid_Framework_Customizer_Colors::get_colors_uri( $this->configs ),
-					$deps,
-					$last_mod
-				);
-				wp_enqueue_style( $handle );
-			}
+			wp_register_style(
+				$handle,
+				Boldgrid_Framework_Customizer_Colors::get_colors_uri( $this->configs ),
+				$deps,
+				$last_mod
+			);
+			wp_enqueue_style( $handle );
 		}
 
 		if ( true === $this->configs['edit-post-links']['enabled'] ) {
@@ -618,15 +611,35 @@ public function get_css_vars( $inline_css = '' ) {
 			$inline_css .= "--light-text:{$light};";
 			$inline_css .= "--dark-text:{$dark};";
 			$additional_css = '';
+
 			foreach ( $formatted_palette as $property => $value ) {
+				$value_rgba_array   = $helper->get_rgb_array( $value );
+				$light_hsla_array   = $helper->rgba_to_hsla( $value_rgba_array, 10 );
+				$lighter_hsla_array = $helper->rgba_to_hsla( $value_rgba_array, 20 );
+				$dark_hsla_array    = $helper->rgba_to_hsla( $value_rgba_array, -10 );
+				$darker_hsla_array  = $helper->rgba_to_hsla( $value_rgba_array, -20 );
+
+				$value_raw      = str_replace( array( 'rgb(', ')' ), array( '', '' ), $value );
+				$value_light    = 'hsla(' . implode( ',', $light_hsla_array ) . ')';
+				$value_lighter  = 'hsla(' . implode( ',', $lighter_hsla_array ) . ')';
+				$value_dark     = 'hsla(' . implode( ',', $dark_hsla_array ) . ')';
+				$value_darker   = 'hsla(' . implode( ',', $darker_hsla_array ) . ')';
 				$contrast_color = $helper->get_luminance( $value );
-				$lightness = abs( $contrast_color - $helper->get_luminance( $light ) );
-				$darkness = abs( $contrast_color - $helper->get_luminance( $dark ) );
+				$lightness      = abs( $contrast_color - $helper->get_luminance( $light ) );
+				$darkness       = abs( $contrast_color - $helper->get_luminance( $dark ) );
 				$contrast_color = $lightness > $darkness ? 'light' : 'dark';
 				$contrast_color = "var(--{$contrast_color}-text)";
 
 				$inline_css .= "--{$property}:{$value};";
+				$inline_css .= "--{$property}-light:{$value_light};";
+				$inline_css .= "--{$property}-lighter:{$value_lighter};";
+				$inline_css .= "--{$property}-dark:{$value_dark};";
+				$inline_css .= "--{$property}-darker:{$value_darker};";
+				$inline_css .= "--{$property}-raw:{$value_raw};";
 				$inline_css .= "--{$property}-text-contrast:{$contrast_color};";
+
+				$inline_css .= $helper->generate_hover_variables( $formatted_palette, $property, $value );
+
 				$property2 = str_replace( '-', '', $property );
 				$additional_css .= ".{$property}-text-default, .{$property2}-text-default{color: var(--{$property}-text-contrast);}";
 				$additional_css .= ".{$property}-text-contrast, .{$property2}-text-contrast, .{$property}-text-contrast-hover:hover, .{$property2}-text-contrast-hover:hover, .{$property}-text-contrast-hover:focus, .{$property2}-text-contrast-hover:focus { color: var(--{$property}-text-contrast) !important;}";
diff --git a/src/includes/configs/customizer-options/colors.config.php b/src/includes/configs/customizer-options/colors.config.php
index 249e5434c..71743e3c4 100644
--- a/src/includes/configs/customizer-options/colors.config.php
+++ b/src/includes/configs/customizer-options/colors.config.php
@@ -18,12 +18,6 @@
 	'light_text' => '#ffffff',
 	'dark_text' => '#4d4d4d',
 	'settings' => array(
-		// Directory that contains SCSS files to be compiled.
-		'scss_directory' => array(
-			'framework_dir' => $bgtfw_configs['framework']['asset_dir'] . 'scss/custom-color',
-			'default' => '/inc/boldgrid-theme-framework-config/scss',
-		),
-
 		// After the helper compiles the css, where should the css be stored?
 		'output_css_name' => $bgtfw_configs['framework']['config_directory']['template'] . '/css/color-palettes.css',
 
diff --git a/src/includes/configs/customizer/controls/footer-layout.controls.php b/src/includes/configs/customizer/controls/footer-layout.controls.php
index 75b9710ed..9f69c2658 100644
--- a/src/includes/configs/customizer/controls/footer-layout.controls.php
+++ b/src/includes/configs/customizer/controls/footer-layout.controls.php
@@ -128,7 +128,7 @@
 			),
 		),
 	),
-	'bgtfw_footer_links'  => array(
+	'bgtfw_footer_link_color'  => array(
 		'type'              => 'bgtfw-palette-selector',
 		'transport'         => 'postMessage',
 		'settings'          => 'bgtfw_footer_links',
@@ -136,10 +136,11 @@
 		'description'       => esc_attr__( 'Change the color of your attribution links if shown.', 'crio' ),
 		'section'           => 'bgtfw_footer_colors',
 		'priority'          => 30,
-		'default'           => '',
+		'default'           => get_theme_mod( 'bgtfw_footer_links', '' ),
 		'choices'           => array(
-			'colors' => $bgtfw_formatted_palette,
-			'size'   => $bgtfw_palette->get_palette_size( $bgtfw_formatted_palette ),
+			'selectors' => Boldgrid_Framework_Links::$footer_link_selectors,
+			'colors'    => $bgtfw_formatted_palette,
+			'size'      => $bgtfw_palette->get_palette_size( $bgtfw_formatted_palette ),
 		),
 		'sanitize_callback' => array( $bgtfw_color_sanitize, 'sanitize_palette_selector' ),
 	),
diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-colors.php b/src/includes/customizer/class-boldgrid-framework-customizer-colors.php
index a1413b69f..0c21d751f 100644
--- a/src/includes/customizer/class-boldgrid-framework-customizer-colors.php
+++ b/src/includes/customizer/class-boldgrid-framework-customizer-colors.php
@@ -185,7 +185,7 @@ public function add_palette_controls() {
 				'default' => '',
 				'type' => 'theme_mod',
 				'capability' => 'edit_theme_options',
-				'transport' => 'refresh',
+				'transport' => 'postMessage',
 			)
 		);
 		$this->wp_customize->add_control(
diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php b/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php
index 022a485d6..814877703 100644
--- a/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php
+++ b/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php
@@ -445,7 +445,7 @@ public function get_sidebar_defaults( $sidebar_id, $type = false ) {
 				$settings[ $sidebar_id ]['background_color'] = get_theme_mod( 'bgtfw_footer_color', $this->get_control_default( 'bgtfw_footer_color' ) );
 			}
 			if ( empty( $settings[ $sidebar_id ]['links_color'] ) ) {
-				$settings[ $sidebar_id ]['links_color'] = get_theme_mod( 'bgtfw_footer_links', $this->get_control_default( 'bgtfw_footer_links' ) );
+				$settings[ $sidebar_id ]['links_color'] = get_theme_mod( 'bgtfw_footer_link_color', $this->get_control_default( 'bgtfw_footer_link_color' ) );
 			}
 		}