diff --git a/blocksuite/affine/components/src/color-picker/color-picker.ts b/blocksuite/affine/components/src/color-picker/color-picker.ts
index d9c251c499..18191874a6 100644
--- a/blocksuite/affine/components/src/color-picker/color-picker.ts
+++ b/blocksuite/affine/components/src/color-picker/color-picker.ts
@@ -1,6 +1,5 @@
 import type { Color } from '@blocksuite/affine-model';
 import { on, once, stopPropagation } from '@blocksuite/affine-shared/utils';
-import { clamp } from '@blocksuite/global/gfx';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { batch, computed, signal } from '@preact/signals-core';
 import { html, LitElement } from 'lit';
@@ -9,6 +8,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import clamp from 'lodash-es/clamp';
 
 import { AREA_CIRCLE_R, MATCHERS, SLIDER_CIRCLE_R } from './consts.js';
 import { COLOR_PICKER_STYLE } from './styles.js';
@@ -133,7 +133,7 @@ export class EdgelessColorPicker extends SignalWatcher(
 
   #setAlphaPos(clientX: number) {
     const { left, width } = this.#alphaRect;
-    const x = clamp(0, clientX - left, width);
+    const x = clamp(clientX - left, 0, width);
 
     this.alphaPosX$.value = x;
   }
@@ -141,7 +141,7 @@ export class EdgelessColorPicker extends SignalWatcher(
   #setAlphaPosWithWheel(y: number) {
     const { width } = this.#alphaRect;
     const px = this.alphaPosX$.peek();
-    const ax = clamp(0, px + (y * width) / 100, width);
+    const ax = clamp(px + (y * width) / 100, 0, width);
 
     this.alphaPosX$.value = ax;
   }
@@ -161,7 +161,7 @@ export class EdgelessColorPicker extends SignalWatcher(
 
   #setHuePos(clientX: number) {
     const { left, width } = this.#hueRect;
-    const x = clamp(0, clientX - left, width);
+    const x = clamp(clientX - left, 0, width);
 
     this.huePosX$.value = x;
   }
@@ -169,15 +169,15 @@ export class EdgelessColorPicker extends SignalWatcher(
   #setHuePosWithWheel(y: number) {
     const { width } = this.#hueRect;
     const px = this.huePosX$.peek();
-    const ax = clamp(0, px + (y * width) / 100, width);
+    const ax = clamp(px + (y * width) / 100, 0, width);
 
     this.huePosX$.value = ax;
   }
 
   #setPalettePos(clientX: number, clientY: number) {
     const { left, top, width, height } = this.#paletteRect;
-    const x = clamp(0, clientX - left, width);
-    const y = clamp(0, clientY - top, height);
+    const x = clamp(clientX - left, 0, width);
+    const y = clamp(clientY - top, 0, height);
 
     this.palettePos$.value = { x, y };
   }
@@ -185,8 +185,8 @@ export class EdgelessColorPicker extends SignalWatcher(
   #setPalettePosWithWheel(x: number, y: number) {
     const { width, height } = this.#paletteRect;
     const pos = this.palettePos$.peek();
-    const px = clamp(0, pos.x + (x * width) / 100, width);
-    const py = clamp(0, pos.y + (y * height) / 100, height);
+    const px = clamp(pos.x + (x * width) / 100, 0, width);
+    const py = clamp(pos.y + (y * height) / 100, 0, height);
 
     this.palettePos$.value = { x: px, y: py };
   }
diff --git a/blocksuite/affine/components/src/color-picker/utils.ts b/blocksuite/affine/components/src/color-picker/utils.ts
index 85c4319c8e..402ca53c61 100644
--- a/blocksuite/affine/components/src/color-picker/utils.ts
+++ b/blocksuite/affine/components/src/color-picker/utils.ts
@@ -1,7 +1,7 @@
 // https://www.w3.org/TR/css-color-4/
 
 import type { Color, ColorScheme } from '@blocksuite/affine-model';
-import { clamp } from '@blocksuite/global/gfx';
+import clamp from 'lodash-es/clamp';
 
 import { COLORS, FIRST_COLOR } from './consts.js';
 import type {
@@ -54,7 +54,7 @@ export function linearGradientAt(t: number): Rgb {
 const lerp = (a: number, b: number, t: number) => a + t * (b - a);
 
 export const bound01 = (n: number, max: number) => {
-  n = clamp(0, n, max);
+  n = clamp(n, 0, max);
 
   // Handle floating point rounding errors
   if (Math.abs(n - max) < 0.000001) {
@@ -94,7 +94,7 @@ export const rgbToHsv = ({ r, g, b }: Rgb): Hsv => {
 export const hsvToRgb = ({ h, s, v }: Hsv): Rgb => {
   if (h < 0) h = (h + 1) % 1; // wrap
   h *= 6;
-  s = clamp(0, s, 1);
+  s = clamp(s, 0, 1);
 
   const i = Math.floor(h),
     f = h - i,