diff --git a/.changeset/purple-badgers-notice.md b/.changeset/purple-badgers-notice.md
new file mode 100644
index 0000000000000..29e434f000738
--- /dev/null
+++ b/.changeset/purple-badgers-notice.md
@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": minor
+"gradio": minor
+---
+
+feat:Fix limited brush colors in image editor
diff --git a/js/imageeditor/shared/tools/Brush.svelte b/js/imageeditor/shared/tools/Brush.svelte
index 5a64641b55787..be5173c9ac41f 100644
--- a/js/imageeditor/shared/tools/Brush.svelte
+++ b/js/imageeditor/shared/tools/Brush.svelte
@@ -43,9 +43,7 @@
 	export let color_mode: Brush["color_mode"] | undefined = undefined;
 	export let mode: "erase" | "draw";
 
-	$: processed_colors = colors
-		? colors.map(process_color).filter((_, i) => i < 4)
-		: [];
+	$: processed_colors = colors ? colors.map(process_color) : [];
 
 	$: selected_color =
 		default_color === "auto"
diff --git a/js/imageeditor/shared/tools/ColorSwatch.svelte b/js/imageeditor/shared/tools/ColorSwatch.svelte
index c78999731896a..479c2d231a31f 100644
--- a/js/imageeditor/shared/tools/ColorSwatch.svelte
+++ b/js/imageeditor/shared/tools/ColorSwatch.svelte
@@ -115,8 +115,10 @@
 	}
 	.swatch {
 		display: flex;
+		flex-wrap: wrap;
 		gap: var(--size-2-5);
 		justify-content: space-around;
+		margin-top: var(--size-2);
 		margin-bottom: var(--size-2);
 		margin-right: var(--size-6);
 		padding-left: var(--size-2);