diff --git a/packages/ui/src/core/color-picker/color-picker.component.tsx b/packages/ui/src/core/color-picker/color-picker.component.tsx
index c3124f33..30c11db5 100644
--- a/packages/ui/src/core/color-picker/color-picker.component.tsx
+++ b/packages/ui/src/core/color-picker/color-picker.component.tsx
@@ -112,16 +112,16 @@ const ColorPicker = intrinsicComponent<ColorPickerProps, HTMLDivElement>(
       const newHexColor = rgbToHex(...rgbArr);
 
       setRgbColorValue([...rgbArr]);
+
       if (validateHex(newHexColor)) {
         setRangePicker({
           ...rangePicker,
           color: newHexColor,
         });
+
         changeBarPosByColor(newHexColor);
 
-        if (typeof onChange === 'function') {
-          onChange(rangePicker.color, getRgbColor(newHexColor), filterTransparentColor(localPinnedColors));
-        }
+        changeRangePickerPointerPosByColor(newHexColor);
       }
     };
 
@@ -282,6 +282,7 @@ const ColorPicker = intrinsicComponent<ColorPickerProps, HTMLDivElement>(
 
     const barPointSliding = useDrag(updateBarColor, updateBarColor, null);
     const rangePickerPointSliding = useDrag(updateRangePickerColor, updateRangePickerColor, null);
+
     return (
       <Styled.ColorPickerWrapper ref={ref} {...rest}>
         <Styled.ColorPickerAction>