diff --git a/doc/classes/CodeEdit.xml b/doc/classes/CodeEdit.xml
index d455799c298..136b8e5fc5d 100644
--- a/doc/classes/CodeEdit.xml
+++ b/doc/classes/CodeEdit.xml
@@ -721,6 +721,9 @@
 		<theme_item name="can_fold_code_region" data_type="icon" type="Texture2D">
 			Sets a custom [Texture2D] to draw in the line folding gutter when a code region can be folded.
 		</theme_item>
+		<theme_item name="completion_color_bg" data_type="icon" type="Texture2D">
+			Background panel for the color preview box in autocompletion (visible when the color is translucent).
+		</theme_item>
 		<theme_item name="executing_line" data_type="icon" type="Texture2D">
 			Icon to draw in the executing gutter for executing lines.
 		</theme_item>
diff --git a/scene/gui/code_edit.cpp b/scene/gui/code_edit.cpp
index 412eb835152..e8be38e680a 100644
--- a/scene/gui/code_edit.cpp
+++ b/scene/gui/code_edit.cpp
@@ -211,7 +211,13 @@ void CodeEdit::_notification(int p_what) {
 							tl->set_horizontal_alignment(HORIZONTAL_ALIGNMENT_RIGHT);
 						} else {
 							if (code_completion_options[l].default_value.get_type() == Variant::COLOR) {
-								draw_rect(Rect2(Point2(code_completion_rect.position.x + code_completion_rect.size.width - icon_area_size.x, icon_area.position.y), icon_area_size), (Color)code_completion_options[l].default_value);
+								const Color color = code_completion_options[l].default_value;
+								const Rect2 rect = Rect2(Point2(code_completion_rect.position.x + code_completion_rect.size.width - icon_area_size.x, icon_area.position.y), icon_area_size);
+								if (color.a < 1.0) {
+									draw_texture_rect(theme_cache.completion_color_bg, rect, true);
+								}
+
+								draw_rect(rect, color);
 							}
 							tl->set_horizontal_alignment(HORIZONTAL_ALIGNMENT_LEFT);
 						}
@@ -2771,6 +2777,7 @@ void CodeEdit::_bind_methods() {
 	BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_ICON, CodeEdit, can_fold_code_region_icon, "can_fold_code_region");
 	BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_ICON, CodeEdit, folded_code_region_icon, "folded_code_region");
 	BIND_THEME_ITEM(Theme::DATA_TYPE_ICON, CodeEdit, folded_eol_icon);
+	BIND_THEME_ITEM(Theme::DATA_TYPE_ICON, CodeEdit, completion_color_bg);
 
 	BIND_THEME_ITEM(Theme::DATA_TYPE_COLOR, CodeEdit, breakpoint_color);
 	BIND_THEME_ITEM_CUSTOM(Theme::DATA_TYPE_ICON, CodeEdit, breakpoint_icon, "breakpoint");
diff --git a/scene/gui/code_edit.h b/scene/gui/code_edit.h
index 580435f65ea..09340be0358 100644
--- a/scene/gui/code_edit.h
+++ b/scene/gui/code_edit.h
@@ -245,6 +245,7 @@ private:
 		Ref<Texture2D> can_fold_code_region_icon;
 		Ref<Texture2D> folded_code_region_icon;
 		Ref<Texture2D> folded_eol_icon;
+		Ref<Texture2D> completion_color_bg;
 
 		Color breakpoint_color = Color(1, 1, 1);
 		Ref<Texture2D> breakpoint_icon = Ref<Texture2D>();
diff --git a/scene/theme/default_theme.cpp b/scene/theme/default_theme.cpp
index f8472278dc9..8a9e784c470 100644
--- a/scene/theme/default_theme.cpp
+++ b/scene/theme/default_theme.cpp
@@ -504,6 +504,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	theme->set_icon("can_fold_code_region", "CodeEdit", icons["region_unfolded"]);
 	theme->set_icon("folded_code_region", "CodeEdit", icons["region_folded"]);
 	theme->set_icon("folded_eol_icon", "CodeEdit", icons["text_edit_ellipsis"]);
+	theme->set_icon("completion_color_bg", "CodeEdit", icons["mini_checkerboard"]);
 
 	theme->set_font(SceneStringName(font), "CodeEdit", Ref<Font>());
 	theme->set_font_size(SceneStringName(font_size), "CodeEdit", -1);