diff --git a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
index 77ab230..bf1735e 100644
--- a/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
+++ b/lottie-compose/src/main/java/com/airbnb/lottie/compose/LottieAnimationState.kt
@@ -1,6 +1,10 @@
 package com.airbnb.lottie.compose
 
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 
 @Composable
 fun rememberLottieAnimationState(
diff --git a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
index 7059508..270cde5 100644
--- a/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
+++ b/sample-compose/src/main/java/com/airbnb/lottie/sample/compose/player/PlayerPage.kt
@@ -6,7 +6,11 @@
 import androidx.compose.foundation.ScrollableColumn
 import androidx.compose.foundation.ScrollableRow
 import androidx.compose.foundation.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
@@ -14,7 +18,9 @@
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
@@ -74,15 +80,19 @@
 @Composable
 private fun PlayerPage(
     spec: LottieAnimationSpec,
-    backgroundColor: Color? = null,
+    animationBackgroundColor: Color? = null,
 ) {
     val backPressedDispatcher = BackPressedDispatcherAmbient.current
     val compositionResult = rememberLottieComposition(spec)
     val animationState = rememberLottieAnimationState(autoPlay = true, repeatCount = Integer.MAX_VALUE)
     val scaffoldState = rememberScaffoldState()
     var focusMode by remember { mutableStateOf(false) }
-    val border = remember { mutableStateOf(false) }
-    val speed = remember { mutableStateOf(false) }
+    var backgroundColor by remember { mutableStateOf(animationBackgroundColor) }
+
+    val borderToolbar = remember { mutableStateOf(false) }
+    val speedToolbar = remember { mutableStateOf(false) }
+    val backgroundColorToolbar = remember { mutableStateOf(false) }
+
     val failedMessage = stringResource(R.string.failed_to_load)
     val okMessage = stringResource(R.string.ok)
 
@@ -139,7 +149,7 @@
                     modifier = Modifier
                         .fillMaxSize()
                         .align(Alignment.Center)
-                        .maybeDrawBorder(border.value)
+                        .maybeDrawBorder(borderToolbar.value)
                 )
                 if (compositionResult is LottieCompositionResult.Loading) {
                     DebouncedCircularProgressIndicator(
@@ -149,17 +159,24 @@
                     )
                 }
             }
-            if (speed.value && !focusMode) {
+            if (speedToolbar.value && !focusMode) {
                 SpeedToolbar(
                     speed = animationState.speed,
                     onSpeedChanged = { animationState.speed = it }
                 )
             }
+            if (backgroundColorToolbar.value && !focusMode) {
+                BackgroundColorToolbar(
+                    animationBackgroundColor = animationBackgroundColor,
+                    onColorChanged = { backgroundColor = it }
+                )
+            }
             if (!focusMode) {
                 PlayerControlsRow(animationState, compositionResult())
                 Toolbar(
-                    border = border,
-                    speed = speed,
+                    border = borderToolbar,
+                    speed = speedToolbar,
+                    backgroundColor = backgroundColorToolbar,
                     warnings = compositionResult()?.warnings ?: emptyList()
                 )
             }
@@ -258,9 +275,57 @@
 }
 
 @Composable
+private fun BackgroundColorToolbar(
+    animationBackgroundColor: Color?,
+    onColorChanged: (Color) -> Unit,
+) {
+    Row(
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = Modifier
+            .drawTopBorder()
+            .padding(vertical = 12.dp, horizontal = 16.dp)
+            .fillMaxWidth()
+    ) {
+        listOfNotNull(
+            colorResource(R.color.background_color1),
+            colorResource(R.color.background_color2),
+            colorResource(R.color.background_color3),
+            colorResource(R.color.background_color4),
+            colorResource(R.color.background_color5),
+            colorResource(R.color.background_color6),
+            animationBackgroundColor.takeIf { it != Color.White },
+        ).forEachIndexed { i, color ->
+            val strokeColor = if (i == 0) colorResource(R.color.background_color1_stroke) else color
+            BackgroundToolbarItem(
+                color = color,
+                strokeColor = strokeColor,
+                onClick = { onColorChanged(color) }
+            )
+        }
+    }
+}
+
+@Composable
+private fun BackgroundToolbarItem(
+    color: Color,
+    strokeColor: Color = color,
+    onClick: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .clip(CircleShape)
+            .background(color)
+            .clickable(onClick = onClick)
+            .preferredSize(24.dp)
+            .border(1.dp, strokeColor, shape = CircleShape)
+    )
+}
+
+@Composable
 private fun Toolbar(
     border: MutableState<Boolean>,
     speed: MutableState<Boolean>,
+    backgroundColor: MutableState<Boolean>,
     warnings: List<String>,
 ) {
     var showWarningsDialog by remember { mutableStateOf(false) }
@@ -298,6 +363,13 @@
             onClick = { speed.value = it },
             modifier = Modifier.padding(end = 8.dp)
         )
+        ToolbarChip(
+            iconRes = R.drawable.ic_color,
+            label = stringResource(R.string.toolbar_item_color),
+            isActivated = backgroundColor.value,
+            onClick = { backgroundColor.value = it },
+            modifier = Modifier.padding(end = 8.dp)
+        )
     }
 }
 
diff --git a/sample-compose/src/main/res/drawable/ic_color.xml b/sample-compose/src/main/res/drawable/ic_color.xml
new file mode 100644
index 0000000..69dfd9a
--- /dev/null
+++ b/sample-compose/src/main/res/drawable/ic_color.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24.0"
+    android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M12,3c-4.97,0 -9,4.03 -9,9s4.03,9 9,9c0.83,0 1.5,-0.67 1.5,-1.5 0,-0.39 -0.15,-0.74 -0.39,-1.01 -0.23,-0.26 -0.38,-0.61 -0.38,-0.99 0,-0.83 0.67,-1.5 1.5,-1.5L16,16c2.76,0 5,-2.24 5,-5 0,-4.42 -4.03,-8 -9,-8zM6.5,12c-0.83,0 -1.5,-0.67 -1.5,-1.5S5.67,9 6.5,9 8,9.67 8,10.5 7.33,12 6.5,12zM9.5,8C8.67,8 8,7.33 8,6.5S8.67,5 9.5,5s1.5,0.67 1.5,1.5S10.33,8 9.5,8zM14.5,8c-0.83,0 -1.5,-0.67 -1.5,-1.5S13.67,5 14.5,5s1.5,0.67 1.5,1.5S15.33,8 14.5,8zM17.5,12c-0.83,0 -1.5,-0.67 -1.5,-1.5S16.67,9 17.5,9s1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5z"/>
+</vector>
diff --git a/sample-compose/src/main/res/values/colors.xml b/sample-compose/src/main/res/values/colors.xml
index f8c6127..b30c688 100644
--- a/sample-compose/src/main/res/values/colors.xml
+++ b/sample-compose/src/main/res/values/colors.xml
@@ -7,4 +7,13 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+
+    <color name="background_color1">#ffffff</color>
+    <color name="background_color1_stroke">#848484</color>
+    <color name="background_color2">#000000</color>
+    <color name="background_color3">#FF5A5F</color>
+    <color name="background_color4">#008489</color>
+    <color name="background_color5">#A61D55</color>
+    <color name="background_color6">#FFB400</color>
+    <color name="background_color7">#A61D55</color>
 </resources>
\ No newline at end of file
diff --git a/sample-compose/src/main/res/values/strings.xml b/sample-compose/src/main/res/values/strings.xml
index 6e40248..00faace 100644
--- a/sample-compose/src/main/res/values/strings.xml
+++ b/sample-compose/src/main/res/values/strings.xml
@@ -21,6 +21,7 @@
     </plurals>
     <string name="toolbar_item_border">Border</string>
     <string name="toolbar_item_speed">Speed</string>
+    <string name="toolbar_item_color">Background</string>
 
     <string name="failed_to_load">Failed to load composition</string>
     <string name="ok">OK</string>