diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 06139043d533..3755c8fc6d4f 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -27,13 +27,21 @@ function Palette( { name } ) {
 	const screenPath = ! name
 		? '/colors/palette'
 		: '/blocks/' + name + '/colors/palette';
+	const palleteButtonText =
+		colors.length > 0
+			? sprintf(
+					// Translators: %d: Number of palette colors.
+					_n( '%d color', '%d colors', colors.length ),
+					colors.length
+			  )
+			: __( 'Add custom colors' );
 
 	return (
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButton path={ screenPath }>
-					<HStack>
+					<HStack isReversed={ colors.length === 0 }>
 						<FlexBlock>
 							<ZStack isLayered={ false } offset={ -8 }>
 								{ colors.slice( 0, 5 ).map( ( { color } ) => (
@@ -44,13 +52,7 @@ function Palette( { name } ) {
 								) ) }
 							</ZStack>
 						</FlexBlock>
-						<FlexItem>
-							{ sprintf(
-								// Translators: %d: Number of palette colors.
-								_n( '%d color', '%d colors', colors.length ),
-								colors.length
-							) }
-						</FlexItem>
+						<FlexItem>{ palleteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>
 			</ItemGroup>