diff --git a/newspack-theme/inc/color-patterns.php b/newspack-theme/inc/color-patterns.php
index 20e638b86..e7d5c3a74 100755
--- a/newspack-theme/inc/color-patterns.php
+++ b/newspack-theme/inc/color-patterns.php
@@ -595,6 +595,22 @@ function newspack_custom_colors_css() {
 			color: ' . esc_html( $primary_color_contrast ) . ';
 		}
 
+		.edit-post-visual-editor.editor-styles-wrapper .has-primary-color {
+			color: ' . esc_html( $primary_color ) . ';
+		}
+
+		.edit-post-visual-editor.editor-styles-wrapper .has-primary-variation-color {
+			color: ' . esc_html( newspack_adjust_brightness( $primary_color, -30 ) ) . ';
+		}
+
+		.edit-post-visual-editor.editor-styles-wrapper .has-primary-background-color {
+			background-color: ' . esc_html( $primary_color ) . ';
+		}
+
+		.edit-post-visual-editor.editor-styles-wrapper .has-primary-variation-background-color {
+			background-color: ' . esc_html( newspack_adjust_brightness( $primary_color, -30 ) ) . ';
+		}
+
 		/* Secondary color */
 
 		.block-editor-block-list__layout .block-editor-block-list__block .wp-block-file .wp-block-file__button,
@@ -641,6 +657,22 @@ function newspack_custom_colors_css() {
 		.block-editor-block-list__layout .block-editor-block-list__block .wp-block-cover .article-section-title {
 			color: inherit;
 		}
+
+		.edit-post-visual-editor.editor-styles-wrapper .has-secondary-color {
+			color: ' . esc_html( $secondary_color ) . ';
+		}
+
+		.edit-post-visual-editor.editor-styles-wrapper .has-secondary-variation-color {
+			color: ' . esc_html( newspack_adjust_brightness( $secondary_color, -30 ) ) . ';
+		}
+
+		.edit-post-visual-editor.editor-styles-wrapper .has-secondary-background-color {
+			background-color: ' . esc_html( $secondary_color ) . ';
+		}
+
+		.edit-post-visual-editor.editor-styles-wrapper .has-secondary-variation-background-color {
+			background-color: ' . esc_html( newspack_adjust_brightness( $secondary_color, -30 ) ) . ';
+		}
 		';
 
 	if ( newspack_is_active_style_pack( 'default', 'style-3', 'style-4' ) ) {
diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss
index 7fd211223..6988d3309 100644
--- a/newspack-theme/sass/style-editor-base.scss
+++ b/newspack-theme/sass/style-editor-base.scss
@@ -827,3 +827,69 @@ ul.wp-block-archives,
 #newspack-post-subtitle-element {
 	font-style: italic;
 }
+
+/** === Custom Colors === */
+
+.has-primary-background-color {
+	background-color: $color__primary;
+}
+
+.has-primary-variation-background-color {
+	background-color: $color__primary-variation;
+}
+
+.has-secondary-background-color {
+	background-color: $color__secondary;
+}
+
+.has-secondary-variation-background-color {
+	background-color: $color__secondary-variation;
+}
+
+.has-dark-gray-background-color {
+	background-color: #111;
+}
+
+.has-medium-gray-background-color {
+	background-color: #767676;
+}
+
+.has-light-gray-background-color {
+	background-color: #eee;
+}
+
+.has-white-background-color {
+	background-color: #fff;
+}
+
+.has-primary-color {
+	color: $color__primary;
+}
+
+.has-primary-variation-color {
+	color: $color__primary-variation;
+}
+
+.has-secondary-color {
+	color: $color__secondary;
+}
+
+.has-secondary-variation-color {
+	color: $color__secondary-variation;
+}
+
+.has-dark-gray-color {
+	color: #111;
+}
+
+.has-medium-gray-color {
+	color: #767676;
+}
+
+.has-light-gray-color {
+	color: #eee;
+}
+
+.has-white-color {
+	color: #fff;
+}