diff --git a/src/plugins/ui_core_views/custom_colors.ts b/src/plugins/ui_core_views/custom_colors.ts
index 7b3d5b083d..61fa0179bf 100644
--- a/src/plugins/ui_core_views/custom_colors.ts
+++ b/src/plugins/ui_core_views/custom_colors.ts
@@ -87,12 +87,19 @@ export class CustomColorsPlugin extends CoreViewPlugin<CustomColorState> {
           for (const chartId of this.getters.getChartIds(sheetId)) {
             this.tryToAddColors(this.getChartColors(chartId));
           }
+          for (const figureId of this.getters.getFigures(sheetId)) {
+            this.tryToAddColors(this.getCarouselColors(sheetId, figureId.id));
+          }
         }
         break;
       case "UPDATE_CHART":
       case "CREATE_CHART":
         this.tryToAddColors(this.getChartColors(cmd.chartId));
         break;
+      case "CREATE_CAROUSEL":
+      case "UPDATE_CAROUSEL":
+        this.tryToAddColors(this.getCarouselColors(cmd.sheetId, cmd.figureId));
+        break;
       case "UPDATE_CELL":
       case "ADD_CONDITIONAL_FORMAT":
       case "SET_BORDER":
@@ -172,6 +179,15 @@ export class CustomColorsPlugin extends CoreViewPlugin<CustomColorState> {
     return [...colors].map((color) => color[1]); // color[1] is the first capturing group of the regex
   }
 
+  private getCarouselColors(sheetId: UID, figureId: UID): Color[] {
+    const figure = this.getters.getFigure(sheetId, figureId);
+    if (figure?.tag !== "carousel") {
+      return [];
+    }
+    const titleColor = this.getters.getCarousel(figureId).title?.color;
+    return titleColor ? [titleColor] : [];
+  }
+
   private getTableColors(sheetId: UID): Color[] {
     const tables = this.getters.getTables(sheetId);
     return tables.flatMap((table) => {
diff --git a/tests/colors/custom_colors_plugin.test.ts b/tests/colors/custom_colors_plugin.test.ts
index 21d7bef6f8..1ab3feec76 100644
--- a/tests/colors/custom_colors_plugin.test.ts
+++ b/tests/colors/custom_colors_plugin.test.ts
@@ -2,12 +2,14 @@ import { Model } from "../../src";
 import { TABLE_PRESETS } from "../../src/helpers/table_presets";
 import { TableStyle, UID } from "../../src/types";
 import {
+  createCarousel,
   createChart,
   createScorecardChart,
   createTable,
   redo,
   setStyle,
   undo,
+  updateCarousel,
 } from "../test_helpers/commands_helpers";
 import { createColorScale, createEqualCF, target, toRangesData } from "../test_helpers/helpers";
 
@@ -221,6 +223,18 @@ describe("custom colors are correctly handled when editing charts", () => {
     const importedModel = new Model(model.exportData());
     expect(importedModel.getters.getCustomColors()).toEqual(["#654987", "#123456"]);
   });
+
+  test("Carousel title color are taken into account", () => {
+    expect(model.getters.getCustomColors()).toEqual([]);
+    createCarousel(model, { title: { text: "Hello", color: "#123456" }, items: [] }, "id");
+    expect(model.getters.getCustomColors()).toEqual(["#123456"]);
+
+    updateCarousel(model, "id", { title: { text: "Hello", color: "#654321" }, items: [] });
+    expect(model.getters.getCustomColors()).toEqual(["#654321", "#123456"]);
+
+    const model2 = new Model(model.exportData());
+    expect(model2.getters.getCustomColors()).toEqual(["#654321"]);
+  });
 });
 
 test("custom colors from config", () => {