diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
index c1943a2c195..c97eefcf062 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -2470,4 +2470,14 @@ describe("calcite-color-picker", () => {
       });
     });
   });
+
+  it("does not throw when initialized with different format value (format='auto')", async () => {
+    async function doTest(): Promise<void> {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-color-picker value="rgb(89, 77, 77)"></calcite-color-picker>`);
+      await page.waitForChanges();
+    }
+
+    await expect(doTest()).resolves.toBeUndefined();
+  });
 });
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index 3b1b981cea5..ce157eb0d39 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -549,7 +549,8 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
     if (modeChanged || colorChanged) {
       this.internalColorSet(
         color,
-        this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")),
+        (this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css"))) ||
+          this.internalColorUpdateContext === "internal",
         "internal",
       );
     }