diff --git a/composer.json b/composer.json
index d00805b..1aa8951 100644
--- a/composer.json
+++ b/composer.json
@@ -20,7 +20,8 @@
 		"php": ">=7",
 		"composer/installers": "~1.0",
 		"pressbooks/mix": "^2.1",
-		"soberwp/intervention": "1.2.0-p"
+		"soberwp/intervention": "1.2.0-p",
+		"spatie/color": "^1.1"
 	},
 	"require-dev": {
 		"humanmade/coding-standards": "^0.2.1",
diff --git a/composer.lock b/composer.lock
index ba39972..e8a59cc 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "content-hash": "6a3f76d94f447a4cac0b1b48e01e07d0",
+    "content-hash": "edad2ef6112644b56c39a416914d8b0f",
     "packages": [
         {
             "name": "composer/installers",
@@ -209,6 +209,54 @@
                 "wordpress"
             ],
             "time": "2017-08-26T12:21:27+00:00"
+        },
+        {
+            "name": "spatie/color",
+            "version": "1.1.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/color.git",
+                "reference": "5c424dbfa919cc7acdacbf6fdcedb89f790bc04b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/color/zipball/5c424dbfa919cc7acdacbf6fdcedb89f790bc04b",
+                "reference": "5c424dbfa919cc7acdacbf6fdcedb89f790bc04b",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "5.*"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\Color\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Sebastian De Deyne",
+                    "email": "sebastian@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "A little library to handle color conversions",
+            "homepage": "https://github.com/spatie/color",
+            "keywords": [
+                "color",
+                "conversion",
+                "rgb",
+                "spatie"
+            ],
+            "time": "2017-02-03T10:05:49+00:00"
         }
     ],
     "packages-dev": [
diff --git a/functions.php b/functions.php
index 2dff67c..fb6ec4d 100644
--- a/functions.php
+++ b/functions.php
@@ -10,7 +10,7 @@
 /**
  * Ensure dependencies are loaded
  */
-if ( ! class_exists( 'PressbooksMix\\Assets' ) ) {
+if ( ! class_exists( 'Spatie\\Color\\Hex' ) ) {
 	$composer = get_template_directory() . '/vendor/autoload.php';
 	if ( ! file_exists( $composer ) ) {
 		wp_die( sprintf(
@@ -54,6 +54,7 @@ add_filter( 'query_vars', '\Aldine\Filters\register_query_vars' );
 add_filter( 'wp_nav_menu_items', '\Aldine\Filters\adjust_menu', 10, 2 );
 add_action( 'widgets_init', '\Aldine\Actions\widgets_init' );
 add_action( 'wp_enqueue_scripts', '\Aldine\Actions\enqueue_assets' );
+add_action( 'updated_option', '\Aldine\Actions\add_color_variants', 10, 3 );
 add_action( 'customize_register', '\Aldine\Customizer\customize_register' );
 add_action( 'customize_preview_init', '\Aldine\Customizer\customize_preview_js' );
 add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_color_contrast_validator' );
diff --git a/inc/actions/namespace.php b/inc/actions/namespace.php
index de51131..b2d4b82 100644
--- a/inc/actions/namespace.php
+++ b/inc/actions/namespace.php
@@ -6,6 +6,9 @@
 
 namespace Aldine\Actions;
 
+use Spatie\Color\Hex;
+use Spatie\Color\Rgb;
+use Spatie\Color\Rgba;
 use PressbooksMix\Assets;
 
 /**
@@ -165,35 +168,9 @@ function content_width() {
  * @return void
  */
 function output_custom_colors() {
-	$colors = [
-		'primary',
-		'accent',
-		'primary_fg',
-		'accent_fg',
-		'header_text',
-	];
-
-	$values = [];
-
-	foreach ( $colors as $k ) {
-		$v = get_option( "pb_network_color_$k" );
-		if ( $v ) {
-			$values[ $k ] = $v;
-		}
-	}
-
-	$output = '';
-
-	if ( ! empty( $values ) ) {
-		$output .= '<style type="text/css">:root{';
-		foreach ( $values as $k => $v ) {
-			$k = str_replace( '_', '-', $k );
-			$output .= "--$k:$v;";
-		}
-		$output .= '}</style>';
+	if ( defined( 'PB_PLUGIN_VERSION' ) ) {
+		echo \Pressbooks\Admin\Branding\get_customizer_colors();
 	}
-
-	echo $output;
 }
 
 /**
@@ -220,3 +197,25 @@ function hide_catalog_content_editor() {
 		remove_post_type_support( 'page', 'thumbnail' );
 	}
 }
+
+/**
+ * Add dark and alpha variants for customizer colors on update.
+ *
+ * @since 1.0.0
+ */
+function add_color_variants( $option, $old_value, $value ) {
+	if ( ! in_array( $option, [ 'pb_network_color_primary', 'pb_network_color_accent' ], true ) ) {
+		return;
+	}
+
+	$color = Hex::fromString( $value );
+	$color = $color->toRgb();
+	$color_alpha = $color->toRgba( 0.25 );
+	$color_dark = new Rgb(
+		$color->red() * 0.9,
+		$color->green() * 0.9,
+		$color->blue() * 0.9
+	);
+	update_option( $option . '_dark', (string) $color_dark );
+	update_option( $option . '_alpha', (string) $color_alpha );
+}