diff --git a/packages/uui-base/lib/utils/drag.ts b/packages/uui-base/lib/utils/drag.ts
index 02008fd23..610c339ff 100644
--- a/packages/uui-base/lib/utils/drag.ts
+++ b/packages/uui-base/lib/utils/drag.ts
@@ -15,11 +15,19 @@ export const drag = (
   container: HTMLElement,
   options?: Partial<DragOptions>
 ) => {
-  function move(pointerEvent: PointerEvent) {
+  function move(event: PointerEvent | TouchEvent) {
     const dims = container.getBoundingClientRect();
     const defaultView = container.ownerDocument.defaultView!;
-    const offsetX = dims.left + defaultView.pageXOffset;
-    const offsetY = dims.top + defaultView.pageYOffset;
+    const offsetX = dims.left + defaultView.scrollX;
+    const offsetY = dims.top + defaultView.scrollY;
+
+    let pointerEvent: PointerEvent | Touch;
+    if (event instanceof TouchEvent) {
+      pointerEvent = event.touches[0];
+    } else {
+      pointerEvent = event;
+    }
+
     const x = pointerEvent.pageX - offsetX;
     const y = pointerEvent.pageY - offsetY;
 
diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts
index 998c02ba3..0bb2c8565 100644
--- a/packages/uui-color-area/lib/uui-color-area.element.ts
+++ b/packages/uui-color-area/lib/uui-color-area.element.ts
@@ -181,6 +181,9 @@ export class UUIColorAreaElement extends LitElement {
 
     drag(grid, {
       onMove: (x, y) => {
+        // check if coordinates are not NaN (can happen when dragging outside of the grid)
+        if (isNaN(x) || isNaN(y)) return;
+
         this.saturation = clamp((x / width) * 100, 0, 100);
         this.brightness = clamp(100 - (y / height) * 100, 0, 100);
         this.lightness = this.getLightness(this.brightness);