diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index cf72b32b43f86..0c40078d7c690 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -5,13 +5,13 @@
 }
 
 .block-editor-panel-color-gradient-settings {
-	.component-color-indicator {
-		vertical-align: text-bottom;
-	}
+	.block-editor-panel-color-gradient-settings__panel-title {
+		display: flex;
 
-	&__panel-title {
 		.component-color-indicator {
-			display: inline-block;
+			width: $grid-unit-15;
+			height: $grid-unit-15;
+			align-self: center;
 		}
 	}
 
diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss
index 4dbce337b7fa9..f43d90747d7c6 100644
--- a/packages/components/src/color-indicator/style.scss
+++ b/packages/components/src/color-indicator/style.scss
@@ -5,4 +5,5 @@
 	border: $border-width solid $gray-300;
 	display: inline-block;
 	padding: 0;
+	margin-left: $grid-unit-15;
 }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index ba9284f18d102..35c27fe92cfbe 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -34,6 +34,8 @@
 	margin: $grid-unit-20;
 
 	.component-color-indicator {
+		margin-left: 0;
+
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 	}