Index: src/wp-content/themes/twentyfifteen/inc/customizer.php
===================================================================
--- src/wp-content/themes/twentyfifteen/inc/customizer.php	(revision 30839)
+++ src/wp-content/themes/twentyfifteen/inc/customizer.php	(working copy)
@@ -27,11 +27,6 @@
 		'transport'         => 'postMessage',
 	) );
 
-	$wp_customize->add_setting( 'color_scheme_css', array(
-		'default'   => '',
-		'transport' => 'postMessage',
-	) );
-
 	$wp_customize->add_control( 'color_scheme', array(
 		'label'    => esc_html__( 'Base Color Scheme', 'twentyfifteen' ),
 		'section'  => 'colors',
@@ -231,13 +226,34 @@
  */
 function twentyfifteen_color_scheme_css() {
 	$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
-	$color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
 
 	// Don't do anything if the default color scheme is selected.
-	if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
+	if ( 'default' === $color_scheme_option ) {
 		return;
 	}
 
+	$color_scheme = twentyfifteen_get_color_scheme();
+
+	// Convert main and sidebar text hex color to rgba.
+	$color_main_text_rgb        = twentyfifteen_hex2rgb( $color_scheme[3] );
+	$color_sidebar_link_rgb     = twentyfifteen_hex2rgb( $color_scheme[4] );
+	$colors = array(
+		'background_color'            => $color_scheme[0],
+		'header_background_color'     => $color_scheme[1],
+		'box_background_color'        => $color_scheme[2],
+		'textcolor'                   => $color_scheme[3],
+		'secondary_textcolor'         => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb ),
+		'border_color'                => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb ),
+		'border_focus_color'          => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb ),
+		'sidebar_textcolor'           => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb ),
+		'sidebar_border_color'        => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb ),
+		'sidebar_border_focus_color'  => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb ),
+		'secondary_sidebar_textcolor' => $color_scheme[4],
+		'meta_box_background_color'   => $color_scheme[5],
+	);
+
+	$color_scheme_css = twentyfifteen_get_color_scheme_css( $colors );
+
 	wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
 }
 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
@@ -266,27 +282,45 @@
 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
 
 /**
- * Output an Underscore template for generating CSS for the color scheme.
+ * Returns CSS for the color schemes.
  *
- * The template generates the css dynamically for instant display in the Customizer
- * preview, and to be saved in a `theme_mod` for display on the front-end.
+ * @since Twenty Fifteen 1.0
  *
- * @since Twenty Fifteen 1.0
+ * @param array $colors Color scheme colors.
+ * @return string Color scheme CSS.
  */
-function twentyfifteen_color_scheme_css_template() {
-	?>
-	<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
+function twentyfifteen_get_color_scheme_css( $colors ) {
+	if ( empty( $colors ) ) {
+		return '';
+	}
+
+	$colors = wp_parse_args( $colors, array(
+		'background_color'            => '',
+		'header_background_color'     => '',
+		'box_background_color'        => '',
+		'textcolor'                   => '',
+		'secondary_textcolor'         => '',
+		'border_color'                => '',
+		'border_focus_color'          => '',
+		'sidebar_textcolor'           => '',
+		'sidebar_border_color'        => '',
+		'sidebar_border_focus_color'  => '',
+		'secondary_sidebar_textcolor' => '',
+		'meta_box_background_color'   => '',
+	) );
+
+	$css = <<<CSS
 	/* Color Scheme */
 
 	/* Background Color */
 	body {
-		background-color: {{ data.background_color }};
+		background-color: {$colors['background_color']};
 	}
 
 	/* Sidebar Background Color */
 	body:before,
 	.site-header {
-		background-color: {{ data.header_background_color }};
+		background-color: {$colors['header_background_color']};
 	}
 
 	/* Box Background Color */
@@ -298,7 +332,7 @@
 	.page-header,
 	.page-content,
 	.comments-area {
-		background-color: {{ data.box_background_color }};
+		background-color: {$colors['box_background_color']};
 	}
 
 	/* Box Background Color */
@@ -315,7 +349,7 @@
 	.page-links a:hover,
 	.page-links a:focus,
 	.sticky-post {
-		color: {{ data.box_background_color }};
+		color: {$colors['box_background_color']};
 	}
 
 	/* Main Text Color */
@@ -328,7 +362,7 @@
 	.widget_calendar tbody a,
 	.page-links a,
 	.sticky-post {
-		background-color: {{ data.textcolor }};
+		background-color: {$colors['textcolor']};
 	}
 
 	/* Main Text Color */
@@ -352,7 +386,7 @@
 	.comment-list .reply a:focus,
 	.site-info a:hover,
 	.site-info a:focus {
-		color: {{ data.textcolor }};
+		color: {$colors['textcolor']};
 	}
 
 	/* Main Text Color */
@@ -369,7 +403,7 @@
 	.pingback .edit-link a:hover,
 	.comment-list .reply a:hover,
 	.site-info a:hover {
-		border-color: {{ data.textcolor }};
+		border-color: {$colors['textcolor']};
 	}
 
 	/* Secondary Text Color */
@@ -389,8 +423,8 @@
 	.widget_calendar tbody a:focus,
 	.page-links a:hover,
 	.page-links a:focus {
-		background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		background-color: {{ data.secondary_textcolor }};
+		background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+		background-color: {$colors['secondary_textcolor']};
 	}
 
 	/* Secondary Text Color */
@@ -429,24 +463,24 @@
 	.wp-caption-text,
 	.gallery-caption,
 	.comment-list .reply a {
-		color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		color: {{ data.secondary_textcolor }};
+		color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+		color: {$colors['secondary_textcolor']};
 	}
 
 	/* Secondary Text Color */
 	blockquote,
 	.logged-in-as a:hover,
 	.comment-author a:hover {
-		border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.secondary_textcolor }};
+		border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+		border-color: {$colors['secondary_textcolor']};
 	}
 
 	/* Border Color */
 	hr,
 	.dropdown-toggle:hover,
 	.dropdown-toggle:focus {
-		background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		background-color: {{ data.border_color }};
+		background-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+		background-color: {$colors['border_color']};
 	}
 
 	/* Border Color */
@@ -481,67 +515,67 @@
 	.comment-list .trackback,
 	.comment-list .reply a,
 	.no-comments {
-		border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.border_color }};
+		border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+		border-color: {$colors['border_color']};
 	}
 
 	/* Border Focus Color */
 	a:focus,
 	button:focus,
 	input:focus {
-		outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		outline-color: {{ data.border_focus_color }};
+		outline-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+		outline-color: {$colors['border_focus_color']};
 	}
 
 	input:focus,
 	textarea:focus {
-		border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.border_focus_color }};
+		border-color: {$colors['textcolor']}; /* Fallback for IE7 and IE8 */
+		border-color: {$colors['border_focus_color']};
 	}
 
 	/* Sidebar Link Color */
 	.secondary-toggle:before {
-		color: {{ data.sidebar_textcolor }};
+		color: {$colors['sidebar_textcolor']};
 	}
 
 	.site-title a,
 	.site-description {
-		color: {{ data.sidebar_textcolor }};
+		color: {$colors['sidebar_textcolor']};
 	}
 
 	/* Sidebar Text Color */
 	.site-title a:hover,
 	.site-title a:focus {
-		color: {{ data.secondary_sidebar_textcolor }};
+		color: {$colors['secondary_sidebar_textcolor']};
 	}
 
 	/* Sidebar Border Color */
 	.secondary-toggle {
-		border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.sidebar_border_color }};
+		border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
+		border-color: {$colors['sidebar_border_color']};
 	}
 
 	/* Sidebar Border Focus Color */
 	.secondary-toggle:hover,
 	.secondary-toggle:focus {
-		border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
-		border-color: {{ data.sidebar_border_focus_color }};
+		border-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
+		border-color: {$colors['sidebar_border_focus_color']};
 	}
 
 	.site-title a {
-		outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
-		outline-color: {{ data.sidebar_border_focus_color }};
+		outline-color: {$colors['sidebar_textcolor']}; /* Fallback for IE7 and IE8 */
+		outline-color: {$colors['sidebar_border_focus_color']};
 	}
 
 	/* Meta Background Color */
 	.entry-footer {
-		background-color: {{ data.meta_box_background_color }};
+		background-color: {$colors['meta_box_background_color']};
 	}
 
 	@media screen and (min-width: 38.75em) {
 		/* Main Text Color */
 		.page-header {
-			border-color: {{ data.textcolor }};
+			border-color: {$colors['textcolor']};
 		}
 	}
 
@@ -560,7 +594,7 @@
 		.widget_calendar tbody a,
 		.widget_calendar tbody a:hover,
 		.widget_calendar tbody a:focus {
-			color: {{ data.header_background_color }};
+			color: {$colors['header_background_color']};
 		}
 
 		/* Sidebar Link Color */
@@ -569,7 +603,7 @@
 		.widget-title,
 		.widget blockquote cite,
 		.widget blockquote small {
-			color: {{ data.sidebar_textcolor }};
+			color: {$colors['sidebar_textcolor']};
 		}
 
 		.widget button,
@@ -577,11 +611,11 @@
 		.widget input[type="reset"],
 		.widget input[type="submit"],
 		.widget_calendar tbody a {
-			background-color: {{ data.sidebar_textcolor }};
+			background-color: {$colors['sidebar_textcolor']};
 		}
 
 		.textwidget a {
-			border-color: {{ data.sidebar_textcolor }};
+			border-color: {$colors['sidebar_textcolor']};
 		}
 
 		/* Sidebar Text Color */
@@ -592,7 +626,7 @@
 		.widget blockquote,
 		.widget .wp-caption-text,
 		.widget .gallery-caption {
-			color: {{ data.secondary_sidebar_textcolor }};
+			color: {$colors['secondary_sidebar_textcolor']};
 		}
 
 		.widget button:hover,
@@ -605,11 +639,11 @@
 		.widget input[type="submit"]:focus,
 		.widget_calendar tbody a:hover,
 		.widget_calendar tbody a:focus {
-			background-color: {{ data.secondary_sidebar_textcolor }};
+			background-color: {$colors['secondary_sidebar_textcolor']};
 		}
 
 		.widget blockquote {
-			border-color: {{ data.secondary_sidebar_textcolor }};
+			border-color: {$colors['secondary_sidebar_textcolor']};
 		}
 
 		/* Sidebar Border Color */
@@ -626,25 +660,56 @@
 		.widget_nav_menu .sub-menu,
 		.widget_pages .children,
 		.widget abbr[title] {
-			border-color: {{ data.sidebar_border_color }};
+			border-color: {$colors['sidebar_border_color']};
 		}
 
 		.dropdown-toggle:hover,
 		.dropdown-toggle:focus,
 		.widget hr {
-			background-color: {{ data.sidebar_border_color }};
+			background-color: {$colors['sidebar_border_color']};
 		}
 
 		.widget input:focus,
 		.widget textarea:focus {
-			border-color: {{ data.sidebar_border_focus_color }};
+			border-color: {$colors['sidebar_border_focus_color']};
 		}
 
 		.sidebar a:focus,
 		.dropdown-toggle:focus {
-			outline-color: {{ data.sidebar_border_focus_color }};
+			outline-color: {$colors['sidebar_border_focus_color']};
 		}
 	}
+CSS;
+
+	return $css;
+}
+
+/**
+ * Output an Underscore template for generating CSS for the color scheme.
+ *
+ * The template generates the css dynamically for instant display in the Customizer
+ * preview.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_color_scheme_css_template() {
+	$colors = array(
+		'background_color'            => '{{ data.background_color }}',
+		'header_background_color'     => '{{ data.header_background_color }}',
+		'box_background_color'        => '{{ data.box_background_color }}',
+		'textcolor'                   => '{{ data.textcolor }}',
+		'secondary_textcolor'         => '{{ data.secondary_textcolor }}',
+		'border_color'                => '{{ data.border_color }}',
+		'border_focus_color'          => '{{ data.border_focus_color }}',
+		'sidebar_textcolor'           => '{{ data.sidebar_textcolor }}',
+		'sidebar_border_color'        => '{{ data.sidebar_border_color }}',
+		'sidebar_border_focus_color'  => '{{ data.sidebar_border_focus_color }}',
+		'secondary_sidebar_textcolor' => '{{ data.secondary_sidebar_textcolor }}',
+		'meta_box_background_color'   => '{{ data.meta_box_background_color }}',
+	);
+	?>
+	<script type="text/html" id="tmpl-twentyfifteen-color-scheme">
+		<?php echo twentyfifteen_get_color_scheme_css( $colors ); ?>
 	</script>
 	<?php
 }
Index: src/wp-content/themes/twentyfifteen/js/color-scheme-control.js
===================================================================
--- src/wp-content/themes/twentyfifteen/js/color-scheme-control.js	(revision 30839)
+++ src/wp-content/themes/twentyfifteen/js/color-scheme-control.js	(working copy)
@@ -47,7 +47,7 @@
 	} );
 
 	// Generate the CSS for the current Color Scheme.
-	function getCSS() {
+	function updateCSS() {
 		var scheme = api( 'color_scheme' )(),
 			colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
 
@@ -71,7 +71,7 @@
 	_.each( colorSettings, function( setting ) {
 		api( setting, function( setting ) {
 			setting.bind( _.throttle( function() {
-				api( 'color_scheme_css' ).set( getCSS() );
+				updateCSS();
 			}, 250 ) );
 		} );
 	} );
Index: src/wp-content/themes/twentyfifteen/js/customize-preview.js
===================================================================
--- src/wp-content/themes/twentyfifteen/js/customize-preview.js	(revision 30839)
+++ src/wp-content/themes/twentyfifteen/js/customize-preview.js	(working copy)
@@ -25,10 +25,6 @@
 	} );
 
 	// Color Scheme CSS.
-	wp.customize( 'color_scheme_css', function( value ) {
-		value.bind( function( to ) {
-			$style.html( to );
-		} );
-	} );
+	// @todo
 
 } )( jQuery );