diff --git a/crates/bevy_ui/src/entity.rs b/crates/bevy_ui/src/entity.rs
index 3aa587f564..5b3cf25cb6 100644
--- a/crates/bevy_ui/src/entity.rs
+++ b/crates/bevy_ui/src/entity.rs
@@ -2,7 +2,7 @@
 
 use crate::{
     widget::{Button, ImageMode},
-    CalculatedSize, FocusPolicy, Interaction, Node, Style, UiColor, UiImage,
+    BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style, UiImage,
 };
 use bevy_ecs::{
     bundle::Bundle,
@@ -23,8 +23,8 @@ pub struct NodeBundle {
     pub node: Node,
     /// Describes the style including flexbox settings
     pub style: Style,
-    /// Describes the color of the node
-    pub color: UiColor,
+    /// The background color, which serves as a "fill" for this node
+    pub background_color: BackgroundColor,
     /// Describes the image of the node
     pub image: UiImage,
     /// Whether this node should block interaction with lower nodes
@@ -50,8 +50,10 @@ pub struct ImageBundle {
     pub image_mode: ImageMode,
     /// The calculated size based on the given image
     pub calculated_size: CalculatedSize,
-    /// The color of the node
-    pub color: UiColor,
+    /// The background color, which serves as a "fill" for this node
+    ///
+    /// When combined with `UiImage`, tints the provided image.
+    pub background_color: BackgroundColor,
     /// The image of the node
     pub image: UiImage,
     /// Whether this node should block interaction with lower nodes
@@ -152,8 +154,10 @@ pub struct ButtonBundle {
     pub interaction: Interaction,
     /// Whether this node should block interaction with lower nodes
     pub focus_policy: FocusPolicy,
-    /// The color of the node
-    pub color: UiColor,
+    /// The background color, which serves as a "fill" for this node
+    ///
+    /// When combined with `UiImage`, tints the provided image.
+    pub background_color: BackgroundColor,
     /// The image of the node
     pub image: UiImage,
     /// The transform of the node
@@ -174,7 +178,7 @@ impl Default for ButtonBundle {
             focus_policy: Default::default(),
             node: Default::default(),
             style: Default::default(),
-            color: Default::default(),
+            background_color: Default::default(),
             image: Default::default(),
             transform: Default::default(),
             global_transform: Default::default(),
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index e5a2b21c70..62b5e70cf2 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -90,7 +90,7 @@ impl Plugin for UiPlugin {
             .register_type::<Size>()
             .register_type::<UiRect>()
             .register_type::<Style>()
-            .register_type::<UiColor>()
+            .register_type::<BackgroundColor>()
             .register_type::<UiImage>()
             .register_type::<Val>()
             .register_type::<widget::Button>()
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 59c7536829..d0da7a14c3 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -5,7 +5,7 @@ use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
 pub use pipeline::*;
 pub use render_pass::*;
 
-use crate::{prelude::UiCameraConfig, CalculatedClip, Node, UiColor, UiImage};
+use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;
@@ -161,7 +161,7 @@ fn get_ui_graph(render_app: &mut App) -> RenderGraph {
 
 pub struct ExtractedUiNode {
     pub transform: Mat4,
-    pub color: Color,
+    pub background_color: Color,
     pub rect: Rect,
     pub image: Handle<Image>,
     pub atlas_size: Option<Vec2>,
@@ -180,7 +180,7 @@ pub fn extract_uinodes(
         Query<(
             &Node,
             &GlobalTransform,
-            &UiColor,
+            &BackgroundColor,
             &UiImage,
             &ComputedVisibility,
             Option<&CalculatedClip>,
@@ -203,7 +203,7 @@ pub fn extract_uinodes(
         }
         extracted_uinodes.uinodes.push(ExtractedUiNode {
             transform: transform.compute_matrix(),
-            color: color.0,
+            background_color: color.0,
             rect: Rect {
                 min: Vec2::ZERO,
                 max: uinode.size,
@@ -328,7 +328,7 @@ pub fn extract_text_uinodes(
 
             extracted_uinodes.uinodes.push(ExtractedUiNode {
                 transform: extracted_transform,
-                color,
+                background_color: color,
                 rect,
                 image: texture,
                 atlas_size,
@@ -490,7 +490,7 @@ pub fn prepare_uinodes(
             ui_meta.vertices.push(UiVertex {
                 position: positions_clipped[i].into(),
                 uv: uvs[i].into(),
-                color: extracted_uinode.color.as_linear_rgba_f32(),
+                color: extracted_uinode.background_color.as_linear_rgba_f32(),
             });
         }
 
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 728c1c597d..a8d3776e01 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -375,18 +375,21 @@ pub struct CalculatedSize {
     pub size: Size,
 }
 
-/// The color of the node
+/// The background color of the node
+///
+/// This serves as the "fill" color.
+/// When combined with [`UiImage`], tints the provided texture.
 #[derive(Component, Default, Copy, Clone, Debug, Reflect)]
 #[reflect(Component, Default)]
-pub struct UiColor(pub Color);
+pub struct BackgroundColor(pub Color);
 
-impl From<Color> for UiColor {
+impl From<Color> for BackgroundColor {
     fn from(color: Color) -> Self {
         Self(color)
     }
 }
 
-/// The image of the node
+/// The 2D texture displayed for this UI node
 #[derive(Component, Clone, Debug, Reflect, Deref, DerefMut)]
 #[reflect(Component, Default)]
 pub struct UiImage(pub Handle<Image>);
diff --git a/examples/ecs/state.rs b/examples/ecs/state.rs
index d4f0e079a8..4025c40d10 100644
--- a/examples/ecs/state.rs
+++ b/examples/ecs/state.rs
@@ -52,7 +52,7 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
                 align_items: AlignItems::Center,
                 ..default()
             },
-            color: NORMAL_BUTTON.into(),
+            background_color: NORMAL_BUTTON.into(),
             ..default()
         })
         .with_children(|parent| {
@@ -72,7 +72,7 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
 fn menu(
     mut state: ResMut<State<AppState>>,
     mut interaction_query: Query<
-        (&Interaction, &mut UiColor),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
 ) {
diff --git a/examples/games/alien_cake_addict.rs b/examples/games/alien_cake_addict.rs
index a914d0be4b..5ca9ec71b9 100644
--- a/examples/games/alien_cake_addict.rs
+++ b/examples/games/alien_cake_addict.rs
@@ -379,7 +379,7 @@ fn display_score(mut commands: Commands, asset_server: Res<AssetServer>, game: R
                 align_items: AlignItems::Center,
                 ..default()
             },
-            color: Color::NONE.into(),
+            background_color: Color::NONE.into(),
             ..default()
         })
         .with_children(|parent| {
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index f05b58719b..2997c36bc4 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -161,7 +161,7 @@ mod game {
                         align_items: AlignItems::Center,
                         ..default()
                     },
-                    color: Color::BLACK.into(),
+                    background_color: Color::BLACK.into(),
                     ..default()
                 },
                 OnGameScreen,
@@ -349,7 +349,7 @@ mod menu {
     // This system handles changing all buttons color based on mouse interaction
     fn button_system(
         mut interaction_query: Query<
-            (&Interaction, &mut UiColor, Option<&SelectedOption>),
+            (&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
             (Changed<Interaction>, With<Button>),
         >,
     ) {
@@ -367,7 +367,7 @@ mod menu {
     // the button as the one currently selected
     fn setting_button<T: Resource + Component + PartialEq + Copy>(
         interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
-        mut selected_query: Query<(Entity, &mut UiColor), With<SelectedOption>>,
+        mut selected_query: Query<(Entity, &mut BackgroundColor), With<SelectedOption>>,
         mut commands: Commands,
         mut setting: ResMut<T>,
     ) {
@@ -424,7 +424,7 @@ mod menu {
                         align_items: AlignItems::Center,
                         ..default()
                     },
-                    color: Color::CRIMSON.into(),
+                    background_color: Color::CRIMSON.into(),
                     ..default()
                 },
                 OnMainMenuScreen,
@@ -454,7 +454,7 @@ mod menu {
                     .spawn((
                         ButtonBundle {
                             style: button_style.clone(),
-                            color: NORMAL_BUTTON.into(),
+                            background_color: NORMAL_BUTTON.into(),
                             ..default()
                         },
                         MenuButtonAction::Play,
@@ -475,7 +475,7 @@ mod menu {
                     .spawn((
                         ButtonBundle {
                             style: button_style.clone(),
-                            color: NORMAL_BUTTON.into(),
+                            background_color: NORMAL_BUTTON.into(),
                             ..default()
                         },
                         MenuButtonAction::Settings,
@@ -496,7 +496,7 @@ mod menu {
                     .spawn((
                         ButtonBundle {
                             style: button_style,
-                            color: NORMAL_BUTTON.into(),
+                            background_color: NORMAL_BUTTON.into(),
                             ..default()
                         },
                         MenuButtonAction::Quit,
@@ -537,7 +537,7 @@ mod menu {
                         align_items: AlignItems::Center,
                         ..default()
                     },
-                    color: Color::CRIMSON.into(),
+                    background_color: Color::CRIMSON.into(),
                     ..default()
                 },
                 OnSettingsMenuScreen,
@@ -552,7 +552,7 @@ mod menu {
                         .spawn((
                             ButtonBundle {
                                 style: button_style.clone(),
-                                color: NORMAL_BUTTON.into(),
+                                background_color: NORMAL_BUTTON.into(),
                                 ..default()
                             },
                             action,
@@ -591,7 +591,7 @@ mod menu {
                         align_items: AlignItems::Center,
                         ..default()
                     },
-                    color: Color::CRIMSON.into(),
+                    background_color: Color::CRIMSON.into(),
                     ..default()
                 },
                 OnDisplaySettingsMenuScreen,
@@ -605,7 +605,7 @@ mod menu {
                             align_items: AlignItems::Center,
                             ..default()
                         },
-                        color: Color::CRIMSON.into(),
+                        background_color: Color::CRIMSON.into(),
                         ..default()
                     })
                     .with_children(|parent| {
@@ -625,7 +625,7 @@ mod menu {
                                     size: Size::new(Val::Px(150.0), Val::Px(65.0)),
                                     ..button_style.clone()
                                 },
-                                color: NORMAL_BUTTON.into(),
+                                background_color: NORMAL_BUTTON.into(),
                                 ..default()
                             });
                             entity.insert(quality_setting).with_children(|parent| {
@@ -644,7 +644,7 @@ mod menu {
                     .spawn((
                         ButtonBundle {
                             style: button_style,
-                            color: NORMAL_BUTTON.into(),
+                            background_color: NORMAL_BUTTON.into(),
                             ..default()
                         },
                         MenuButtonAction::BackToSettings,
@@ -682,7 +682,7 @@ mod menu {
                         align_items: AlignItems::Center,
                         ..default()
                     },
-                    color: Color::CRIMSON.into(),
+                    background_color: Color::CRIMSON.into(),
                     ..default()
                 },
                 OnSoundSettingsMenuScreen,
@@ -694,7 +694,7 @@ mod menu {
                             align_items: AlignItems::Center,
                             ..default()
                         },
-                        color: Color::CRIMSON.into(),
+                        background_color: Color::CRIMSON.into(),
                         ..default()
                     })
                     .with_children(|parent| {
@@ -708,7 +708,7 @@ mod menu {
                                     size: Size::new(Val::Px(30.0), Val::Px(65.0)),
                                     ..button_style.clone()
                                 },
-                                color: NORMAL_BUTTON.into(),
+                                background_color: NORMAL_BUTTON.into(),
                                 ..default()
                             });
                             entity.insert(Volume(volume_setting));
@@ -721,7 +721,7 @@ mod menu {
                     .spawn((
                         ButtonBundle {
                             style: button_style,
-                            color: NORMAL_BUTTON.into(),
+                            background_color: NORMAL_BUTTON.into(),
                             ..default()
                         },
                         MenuButtonAction::BackToSettings,
diff --git a/examples/ios/src/lib.rs b/examples/ios/src/lib.rs
index b8103d95cc..db9636d7cf 100644
--- a/examples/ios/src/lib.rs
+++ b/examples/ios/src/lib.rs
@@ -124,7 +124,7 @@ fn setup_scene(
 
 fn button_handler(
     mut interaction_query: Query<
-        (&Interaction, &mut UiColor),
+        (&Interaction, &mut BackgroundColor),
         (Changed<Interaction>, With<Button>),
     >,
 ) {
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index 8a0fafe0dd..2bbd3d2c45 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -25,10 +25,13 @@ fn main() {
 }
 
 #[derive(Component)]
-struct IdleColor(UiColor);
+struct IdleColor(BackgroundColor);
 
 fn button_system(
-    mut interaction_query: Query<(&Interaction, &mut UiColor, &IdleColor), Changed<Interaction>>,
+    mut interaction_query: Query<
+        (&Interaction, &mut BackgroundColor, &IdleColor),
+        Changed<Interaction>,
+    >,
 ) {
     for (interaction, mut material, IdleColor(idle_color)) in interaction_query.iter_mut() {
         if matches!(interaction, Interaction::Hovered) {
@@ -74,7 +77,7 @@ fn setup(mut commands: Commands, font: Res<UiFont>) {
 fn spawn_button(
     commands: &mut ChildBuilder,
     font: Handle<Font>,
-    color: UiColor,
+    color: BackgroundColor,
     total: f32,
     i: usize,
     j: usize,
@@ -95,7 +98,7 @@ fn spawn_button(
                     position_type: PositionType::Absolute,
                     ..default()
                 },
-                color,
+                background_color: color,
                 ..default()
             },
             IdleColor(color),
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index 30c7abf8c3..d344b7420c 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -19,7 +19,7 @@ const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
 
 fn button_system(
     mut interaction_query: Query<
-        (&Interaction, &mut UiColor, &Children),
+        (&Interaction, &mut BackgroundColor, &Children),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
@@ -58,7 +58,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 align_items: AlignItems::Center,
                 ..default()
             },
-            color: NORMAL_BUTTON.into(),
+            background_color: NORMAL_BUTTON.into(),
             ..default()
         })
         .with_children(|parent| {
diff --git a/examples/ui/scaling.rs b/examples/ui/scaling.rs
index 9fcf1684bc..e6306f0eb1 100644
--- a/examples/ui/scaling.rs
+++ b/examples/ui/scaling.rs
@@ -44,7 +44,7 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
                 align_items: AlignItems::Center,
                 ..default()
             },
-            color: Color::ANTIQUE_WHITE.into(),
+            background_color: Color::ANTIQUE_WHITE.into(),
             ..default()
         })
         .with_children(|parent| {
@@ -54,7 +54,7 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
                         size: Size::new(Val::Px(40.), Val::Px(40.)),
                         ..default()
                     },
-                    color: Color::RED.into(),
+                    background_color: Color::RED.into(),
                     ..default()
                 })
                 .with_children(|parent| {
@@ -65,7 +65,7 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
                     size: Size::new(Val::Percent(15.), Val::Percent(15.)),
                     ..default()
                 },
-                color: Color::BLUE.into(),
+                background_color: Color::BLUE.into(),
                 ..default()
             });
             parent.spawn(ImageBundle {
diff --git a/examples/ui/transparency_ui.rs b/examples/ui/transparency_ui.rs
index 6abe04ab30..7d377db54b 100644
--- a/examples/ui/transparency_ui.rs
+++ b/examples/ui/transparency_ui.rs
@@ -25,7 +25,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 align_items: AlignItems::Center,
                 ..default()
             },
-            color: Color::rgb(0.1, 0.5, 0.1).into(),
+            background_color: Color::rgb(0.1, 0.5, 0.1).into(),
             ..default()
         })
         .with_children(|parent| {
@@ -51,7 +51,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 align_items: AlignItems::Center,
                 ..default()
             },
-            color: Color::rgb(0.5, 0.1, 0.5).into(),
+            background_color: Color::rgb(0.5, 0.1, 0.5).into(),
             ..default()
         })
         .with_children(|parent| {
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index 7e45df16bf..fb627071bb 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -28,7 +28,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 justify_content: JustifyContent::SpaceBetween,
                 ..default()
             },
-            color: Color::NONE.into(),
+            background_color: Color::NONE.into(),
             ..default()
         })
         .with_children(|parent| {
@@ -40,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         border: UiRect::all(Val::Px(2.0)),
                         ..default()
                     },
-                    color: Color::rgb(0.65, 0.65, 0.65).into(),
+                    background_color: Color::rgb(0.65, 0.65, 0.65).into(),
                     ..default()
                 })
                 .with_children(|parent| {
@@ -52,7 +52,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 align_items: AlignItems::FlexEnd,
                                 ..default()
                             },
-                            color: Color::rgb(0.15, 0.15, 0.15).into(),
+                            background_color: Color::rgb(0.15, 0.15, 0.15).into(),
                             ..default()
                         })
                         .with_children(|parent| {
@@ -82,7 +82,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
                         ..default()
                     },
-                    color: Color::rgb(0.15, 0.15, 0.15).into(),
+                    background_color: Color::rgb(0.15, 0.15, 0.15).into(),
                     ..default()
                 })
                 .with_children(|parent| {
@@ -116,7 +116,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 overflow: Overflow::Hidden,
                                 ..default()
                             },
-                            color: Color::rgb(0.10, 0.10, 0.10).into(),
+                            background_color: Color::rgb(0.10, 0.10, 0.10).into(),
                             ..default()
                         })
                         .with_children(|parent| {
@@ -130,7 +130,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                             max_size: Size::UNDEFINED,
                                             ..default()
                                         },
-                                        color: Color::NONE.into(),
+                                        background_color: Color::NONE.into(),
                                         ..default()
                                     },
                                     ScrollingList::default(),
@@ -177,7 +177,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         border: UiRect::all(Val::Px(20.0)),
                         ..default()
                     },
-                    color: Color::rgb(0.4, 0.4, 1.0).into(),
+                    background_color: Color::rgb(0.4, 0.4, 1.0).into(),
                     ..default()
                 })
                 .with_children(|parent| {
@@ -186,7 +186,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                             ..default()
                         },
-                        color: Color::rgb(0.8, 0.8, 1.0).into(),
+                        background_color: Color::rgb(0.8, 0.8, 1.0).into(),
                         ..default()
                     });
                 });
@@ -200,7 +200,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         justify_content: JustifyContent::Center,
                         ..default()
                     },
-                    color: Color::NONE.into(),
+                    background_color: Color::NONE.into(),
                     ..default()
                 })
                 .with_children(|parent| {
@@ -210,7 +210,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 size: Size::new(Val::Px(100.0), Val::Px(100.0)),
                                 ..default()
                             },
-                            color: Color::rgb(1.0, 0.0, 0.0).into(),
+                            background_color: Color::rgb(1.0, 0.0, 0.0).into(),
                             ..default()
                         })
                         .with_children(|parent| {
@@ -225,7 +225,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     },
                                     ..default()
                                 },
-                                color: Color::rgb(1.0, 0.3, 0.3).into(),
+                                background_color: Color::rgb(1.0, 0.3, 0.3).into(),
                                 ..default()
                             });
                             parent.spawn(NodeBundle {
@@ -239,7 +239,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     },
                                     ..default()
                                 },
-                                color: Color::rgb(1.0, 0.5, 0.5).into(),
+                                background_color: Color::rgb(1.0, 0.5, 0.5).into(),
                                 ..default()
                             });
                             parent.spawn(NodeBundle {
@@ -253,7 +253,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     },
                                     ..default()
                                 },
-                                color: Color::rgb(1.0, 0.7, 0.7).into(),
+                                background_color: Color::rgb(1.0, 0.7, 0.7).into(),
                                 ..default()
                             });
                             // alpha test
@@ -268,7 +268,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     },
                                     ..default()
                                 },
-                                color: Color::rgba(1.0, 0.9, 0.9, 0.4).into(),
+                                background_color: Color::rgba(1.0, 0.9, 0.9, 0.4).into(),
                                 ..default()
                             });
                         });
@@ -283,7 +283,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         align_items: AlignItems::FlexEnd,
                         ..default()
                     },
-                    color: Color::NONE.into(),
+                    background_color: Color::NONE.into(),
                     ..default()
                 })
                 .with_children(|parent| {
diff --git a/examples/window/scale_factor_override.rs b/examples/window/scale_factor_override.rs
index 7f6aeb94ba..2dd38093e4 100644
--- a/examples/window/scale_factor_override.rs
+++ b/examples/window/scale_factor_override.rs
@@ -28,7 +28,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 justify_content: JustifyContent::SpaceBetween,
                 ..default()
             },
-            color: Color::NONE.into(),
+            background_color: Color::NONE.into(),
             ..default()
         })
         .with_children(|parent| {
@@ -40,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         border: UiRect::all(Val::Px(2.0)),
                         ..default()
                     },
-                    color: Color::rgb(0.65, 0.65, 0.65).into(),
+                    background_color: Color::rgb(0.65, 0.65, 0.65).into(),
                     ..default()
                 })
                 .with_children(|parent| {