diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 4744f7571b6dcd..ab384f8349158c 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -5,6 +5,76 @@
  * @package WordPress
  */
 
+/**
+ * Build an array with CSS classes and inline styles defining the colors
+ * which will be applied to the navigation markup in the front-end.
+ *
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
+ * @return array Colors CSS classes and inline styles.
+ */
+function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
+	$colors = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	// Text color.
+	$named_text_color  = null;
+	$custom_text_color = null;
+
+	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
+		$custom_text_color = $context['customOverlayTextColor'];
+	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
+		$named_text_color = $context['overlayTextColor'];
+	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
+		$custom_text_color = $context['customTextColor'];
+	} elseif ( array_key_exists( 'textColor', $context ) ) {
+		$named_text_color = $context['textColor'];
+	} elseif ( isset( $context['style']['color']['text'] ) ) {
+		$custom_text_color = $context['style']['color']['text'];
+	}
+
+	// If has text color.
+	if ( ! is_null( $named_text_color ) ) {
+		// Add the color class.
+		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
+	} elseif ( ! is_null( $custom_text_color ) ) {
+		// Add the custom color inline style.
+		$colors['css_classes'][]  = 'has-text-color';
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
+	}
+
+	// Background color.
+	$named_background_color  = null;
+	$custom_background_color = null;
+
+	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
+		$custom_background_color = $context['customOverlayBackgroundColor'];
+	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
+		$named_background_color = $context['overlayBackgroundColor'];
+	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
+		$custom_background_color = $context['customBackgroundColor'];
+	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
+		$named_background_color = $context['backgroundColor'];
+	} elseif ( isset( $context['style']['color']['background'] ) ) {
+		$custom_background_color = $context['style']['color']['background'];
+	}
+
+	// If has background color.
+	if ( ! is_null( $named_background_color ) ) {
+		// Add the background-color class.
+		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
+	} elseif ( ! is_null( $custom_background_color ) ) {
+		// Add the custom background-color inline style.
+		$colors['css_classes'][]  = 'has-background';
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
+	}
+
+	return $colors;
+}
+
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
@@ -107,7 +177,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$classes         = array_merge(
 		$font_sizes['css_classes']
 	);
-	$style_attribute = ( $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;