diff --git a/.changeset/fluffy-ties-sink.md b/.changeset/fluffy-ties-sink.md
new file mode 100644
index 000000000000..68680957cfac
--- /dev/null
+++ b/.changeset/fluffy-ties-sink.md
@@ -0,0 +1,6 @@
+---
+"@gradio/colorpicker": patch
+"gradio": patch
+---
+
+fix:Add `interactive` args to `gr.ColorPicker`
diff --git a/js/colorpicker/ColorPicker.stories.svelte b/js/colorpicker/ColorPicker.stories.svelte
new file mode 100644
index 000000000000..7609551b37c4
--- /dev/null
+++ b/js/colorpicker/ColorPicker.stories.svelte
@@ -0,0 +1,30 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import ColorPicker from "./static/StaticColorpicker.svelte";
+</script>
+
+<Meta title="Components/Color Picker" component={ColorPicker} argTypes={{}} />
+
+<Template let:args>
+	<ColorPicker value="Color Picker" {...args} />
+</Template>
+
+<Story name="Default" />
+<Story
+	name="Color Picker with a color value and hidden label"
+	args={{ value: "#FFC0CB", show_label: false }}
+/>
+<Story
+	name="Color Picker with a color value and label"
+	args={{ value: "#FFC0CB", label: "This is a neat color" }}
+/>
+
+<Story
+	name="Disabled color picker"
+	args={{ value: "#FFC0CB", interactive: false }}
+/>
+
+<Story
+	name="Color Picker with a color value and info"
+	args={{ value: "#FFC0CB", info: "This is a neat color" }}
+/>
diff --git a/js/colorpicker/index.svelte b/js/colorpicker/index.svelte
index 36802373edf2..c4e0bc09e840 100644
--- a/js/colorpicker/index.svelte
+++ b/js/colorpicker/index.svelte
@@ -19,6 +19,7 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let mode: "static" | "dynamic";
+	export let interactive: boolean;
 </script>
 
 {#if mode === "static"}
@@ -35,6 +36,7 @@
 		{scale}
 		{min_width}
 		{loading_status}
+		{interactive}
 		on:change
 		on:input
 		on:submit
@@ -55,6 +57,7 @@
 		{scale}
 		{min_width}
 		{loading_status}
+		{interactive}
 		on:change
 		on:input
 		on:submit
diff --git a/js/colorpicker/interactive/InteractiveColorpicker.svelte b/js/colorpicker/interactive/InteractiveColorpicker.svelte
index bb3f1db40bd5..f6be1c73d688 100644
--- a/js/colorpicker/interactive/InteractiveColorpicker.svelte
+++ b/js/colorpicker/interactive/InteractiveColorpicker.svelte
@@ -18,6 +18,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
+	export let interactive = true;
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -29,11 +30,11 @@
 		{label}
 		{info}
 		{show_label}
+		disabled={!interactive}
 		on:change
 		on:input
 		on:submit
 		on:blur
 		on:focus
-		disabled
 	/>
 </Block>
diff --git a/js/colorpicker/static/StaticColorpicker.svelte b/js/colorpicker/static/StaticColorpicker.svelte
index bb3f1db40bd5..f6be1c73d688 100644
--- a/js/colorpicker/static/StaticColorpicker.svelte
+++ b/js/colorpicker/static/StaticColorpicker.svelte
@@ -18,6 +18,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
+	export let interactive = true;
 </script>
 
 <Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@@ -29,11 +30,11 @@
 		{label}
 		{info}
 		{show_label}
+		disabled={!interactive}
 		on:change
 		on:input
 		on:submit
 		on:blur
 		on:focus
-		disabled
 	/>
 </Block>