diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
index 25118d2dbeffb..c7d3d838d2b18 100644
--- a/packages/block-library/src/page-list/block.json
+++ b/packages/block-library/src/page-list/block.json
@@ -11,6 +11,10 @@
 		"customTextColor",
 		"backgroundColor",
 		"customBackgroundColor",
+		"overlayTextColor",
+		"customOverlayTextColor",
+		"overlayBackgroundColor",
+		"customOverlayBackgroundColor",
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index a0cadde487d57..9043acb402891 100644
--- a/packages/block-library/src/page-list/index.php
+++ b/packages/block-library/src/page-list/index.php
@@ -16,14 +16,17 @@ function block_core_page_list_build_css_colors( $context ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
+		'overlay_css_classes' => array(),
+		'overlay_inline_styles' => '',
 	);
 
 	// Text color.
 	$has_named_text_color  = array_key_exists( 'textColor', $context );
+	$has_picked_text_color = array_key_exists( 'customTextColor', $context );
 	$has_custom_text_color = isset( $context['style']['color']['text'] );
 
 	// If has text color.
-	if ( $has_custom_text_color || $has_named_text_color ) {
+	if ( $has_custom_text_color || $has_picked_text_color || $has_named_text_color ) {
 		// Add has-text-color class.
 		$colors['css_classes'][] = 'has-text-color';
 	}
@@ -31,6 +34,8 @@ function block_core_page_list_build_css_colors( $context ) {
 	if ( $has_named_text_color ) {
 		// Add the color class.
 		$colors['css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] );
+	} elseif ( $has_picked_text_color ) {
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
 	} elseif ( $has_custom_text_color ) {
 		// Add the custom color inline style.
 		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] );
@@ -38,10 +43,11 @@ function block_core_page_list_build_css_colors( $context ) {
 
 	// Background color.
 	$has_named_background_color  = array_key_exists( 'backgroundColor', $context );
+	$has_picked_background_color = array_key_exists( 'customBackgroundColor', $context );
 	$has_custom_background_color = isset( $context['style']['color']['background'] );
 
 	// If has background color.
-	if ( $has_custom_background_color || $has_named_background_color ) {
+	if ( $has_custom_background_color || $has_picked_background_color || $has_named_background_color ) {
 		// Add has-background class.
 		$colors['css_classes'][] = 'has-background';
 	}
@@ -49,11 +55,64 @@ function block_core_page_list_build_css_colors( $context ) {
 	if ( $has_named_background_color ) {
 		// Add the background-color class.
 		$colors['css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] );
+	} elseif ( $has_picked_background_color ) {
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
 	} elseif ( $has_custom_background_color ) {
 		// Add the custom background-color inline style.
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
 	}
 
+	// Overlay text color
+	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $context );
+	$has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $context );
+
+	// If it has a text color.
+	if ( $has_named_overlay_text_color
+	     || $has_picked_overlay_text_color
+		 || $has_named_text_color
+		 || $has_picked_text_color
+		 || $has_named_text_color ) {
+		$colors['overlay_css_classes'][] = 'has-text-color';
+	}
+
+	// Give overlay colors priority, fall back to Navigation block colors, then global styles
+	if ( $has_named_overlay_text_color ) {
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', $context['overlayTextColor'] );
+	} elseif ( $has_picked_overlay_text_color ) {
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
+	} elseif ( $has_named_text_color ) {
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', $context['textColor'] );
+	} elseif ( $has_picked_text_color ) {
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
+	} elseif ( $has_custom_text_color ) {
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] );
+	}
+
+	// Overlay background colors
+	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $context );
+	$has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $context );
+
+	// If has background color.
+	if ( $has_named_overlay_background_color
+		|| $has_picked_overlay_background_color
+		|| $has_named_background_color
+		|| $has_picked_text_color
+		|| $has_picked_background_color ) {
+		$colors['overlay_css_classes'][] = 'has-background';
+	}
+
+	if ( $has_named_overlay_background_color ) {
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', $context['overlayBackgroundColor'] );
+	} elseif ( $has_picked_overlay_background_color ) {
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
+	} elseif ( $has_named_background_color ) {
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', $context['backgroundColor'] );
+	} elseif ( $has_picked_background_color ) {
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
+	} elseif ( $has_custom_background_color ) {
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
+	}
+
 	return $colors;
 }
 
@@ -89,27 +148,39 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  * Outputs Page list markup from an array of pages with nested children.
  *
  * @param array $nested_pages The array of nested pages.
+ * @param array $colors Color information for overlay styles
+ * @param integer $depth The nesting depth
  *
  * @return string List markup.
  */
-function render_nested_page_list( $nested_pages ) {
+function render_nested_page_list( $nested_pages, $colors, $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
 	$markup = '';
 	foreach ( (array) $nested_pages as $page ) {
 		$css_class = 'wp-block-pages-list__item';
+		$style_attribute = '';
 		if ( isset( $page['children'] ) ) {
 			$css_class .= ' has-child';
 		}
-		$markup .= '<li class="' . $css_class . '">';
+
+		// If this is the first level of submenus, include the overlay colors
+		if ( 1 === $depth ) {
+			$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
+			if ( $colors['overlay_inline_styles'] !== '' ) {
+				$style_attribute = sprintf( ' style="%s"', esc_attr($colors['overlay_inline_styles']));
+			}
+		}
+
+		$markup .= '<li class="' . $css_class . '"' . $style_attribute . '>';
 		$markup .= '<a class="wp-block-pages-list__item__link" href="' . esc_url( $page['link'] ) . '">' . wp_kses(
 			$page['title'],
 			wp_kses_allowed_html( 'post' )
 		) . '</a>';
 		if ( isset( $page['children'] ) ) {
 			$markup .= '<span class="wp-block-page-list__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
-			$markup .= '<ul class="submenu-container">' . render_nested_page_list( $page['children'] ) . '</ul>';
+			$markup .= '<ul class="submenu-container">' . render_nested_page_list( $page['children'], $colors, $depth + 1 ) . '</ul>';
 		}
 		$markup .= '</li>';
 	}
@@ -180,12 +251,6 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 		}
 	}
 
-	$nested_pages = nest_pages( $top_level_pages, $pages_with_children );
-
-	$wrapper_markup = '<ul %1$s>%2$s</ul>';
-
-	$items_markup = render_nested_page_list( $nested_pages );
-
 	$colors          = block_core_page_list_build_css_colors( $block->context );
 	$font_sizes      = block_core_page_list_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
@@ -195,6 +260,12 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
 	$css_classes     = trim( implode( ' ', $classes ) );
 
+	$nested_pages = nest_pages( $top_level_pages, $pages_with_children );
+
+	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+
+	$items_markup = render_nested_page_list( $nested_pages, $colors );
+
 	if ( $block->context && $block->context['showSubmenuIcon'] ) {
 		$css_classes .= ' show-submenu-icons';
 	}