diff --git a/package.json b/package.json
index 137d759811..317023f679 100644
--- a/package.json
+++ b/package.json
@@ -212,7 +212,7 @@
     "rate-limiter-flexible": "^2.4.2",
     "react": "^17.0.2",
     "react-avatar-editor": "^13.0.2",
-    "react-colorful": "^5.6.1",
+    "react-colorful": "^5.7.0",
     "react-day-picker": "^8.10.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
diff --git a/shared/components/ColorPicker.tsx b/shared/components/ColorPicker.tsx
index 8b40967c6f..ac3562662a 100644
--- a/shared/components/ColorPicker.tsx
+++ b/shared/components/ColorPicker.tsx
@@ -1,7 +1,6 @@
 import copy from "copy-to-clipboard";
-import { debounce } from "es-toolkit/compat";
 import { CheckmarkIcon, CopyIcon } from "outline-icons";
-import { useMemo, useState, useEffect, useRef, useCallback } from "react";
+import { useState, useRef, useCallback } from "react";
 import {
   HexColorInput,
   HexAlphaColorPicker,
@@ -41,23 +40,6 @@ function ColorPicker({ activeColor, onSelect, alpha }: Props) {
     [onSelect]
   );
 
-  const debouncedApplyColor = useMemo(
-    () => debounce(applyColor, 250),
-    [applyColor]
-  );
-
-  useEffect(
-    () => () => {
-      debouncedApplyColor.cancel();
-    },
-    [debouncedApplyColor]
-  );
-
-  const handleColorChangePicker = (newColor: string) => {
-    setColor(newColor);
-    debouncedApplyColor(newColor);
-  };
-
   const handleColorChangeInput = (newColor: string) => {
     setColor(newColor);
     applyColor(newColor);
@@ -75,12 +57,14 @@ function ColorPicker({ activeColor, onSelect, alpha }: Props) {
       {alpha ? (
         <StyledHexAlphaColorPicker
           color={color}
-          onChange={handleColorChangePicker}
+          onChange={setColor}
+          onChangeEnd={applyColor}
         />
       ) : (
         <StyledHexNonAlphaColorPicker
           color={color}
-          onChange={handleColorChangePicker}
+          onChange={setColor}
+          onChangeEnd={applyColor}
         />
       )}
 
diff --git a/yarn.lock b/yarn.lock
index 535791af5f..4b41a96e24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15852,7 +15852,7 @@ __metadata:
     rate-limiter-flexible: "npm:^2.4.2"
     react: "npm:^17.0.2"
     react-avatar-editor: "npm:^13.0.2"
-    react-colorful: "npm:^5.6.1"
+    react-colorful: "npm:^5.7.0"
     react-day-picker: "npm:^8.10.1"
     react-dnd: "npm:^16.0.1"
     react-dnd-html5-backend: "npm:^16.0.1"
@@ -17243,13 +17243,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-colorful@npm:^5.6.1":
-  version: 5.6.1
-  resolution: "react-colorful@npm:5.6.1"
+"react-colorful@npm:^5.7.0":
+  version: 5.7.0
+  resolution: "react-colorful@npm:5.7.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/48eb73cf71e10841c2a61b6b06ab81da9fffa9876134c239bfdebcf348ce2a47e56b146338e35dfb03512c85966bfc9a53844fc56bc50154e71f8daee59ff6f0
+  checksum: 10c0/d8db4e66b6f6edf30cc2bb6c755bea45e8e133f9667c373897a048da6931d1a31554c0253043be7853c21f9df1e0928af9528122f698bcd5b847a83663c58f0e
   languageName: node
   linkType: hard