diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts
index 41e30d017e..83ba26d8d2 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts
@@ -44,6 +44,7 @@ import type {
   EntityRectAddedPayload,
   Rect,
   RgbaColor,
+  RgbColor,
   Tool,
 } from 'features/controlLayers/store/types';
 import { RGBA_BLACK } from 'features/controlLayers/store/types';
@@ -249,7 +250,7 @@ export class CanvasStateApiModule {
   $currentFill: WritableAtom<RgbaColor> = atom();
   $selectedEntity: WritableAtom<EntityStateAndAdapter | null> = atom();
   $selectedEntityIdentifier: WritableAtom<CanvasEntityIdentifier | null> = atom();
-  $colorUnderCursor: WritableAtom<RgbaColor | null> = atom();
+  $colorUnderCursor: WritableAtom<RgbColor> = atom(RGBA_BLACK);
 
   // Read-write state, ephemeral interaction state
   $isDrawing = $isDrawing;
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts
index 9e3d2aedaa..ada23a724d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasToolModule.ts
@@ -1,5 +1,5 @@
 import type { SerializableObject } from 'common/types';
-import { rgbaColorToString } from 'common/util/colorCodeTransformers';
+import { rgbaColorToString, rgbColorToString } from 'common/util/colorCodeTransformers';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import type { CanvasPreviewModule } from 'features/controlLayers/konva/CanvasPreviewModule';
 import { BRUSH_BORDER_INNER_COLOR, BRUSH_BORDER_OUTER_COLOR } from 'features/controlLayers/konva/constants';
@@ -225,7 +225,6 @@ export class CanvasToolModule {
     const cursorPos = this.manager.stateApi.$lastCursorPos.get();
     const isDrawing = this.manager.stateApi.$isDrawing.get();
     const isMouseDown = this.manager.stateApi.$isMouseDown.get();
-    const colorUnderCursor = this.manager.stateApi.$colorUnderCursor.get();
 
     const tool = toolState.selected;
 
@@ -297,16 +296,18 @@ export class CanvasToolModule {
         });
         this.konva.eraser.innerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
         this.konva.eraser.outerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
-      } else if (cursorPos && colorUnderCursor) {
+      } else if (cursorPos && tool === 'colorPicker') {
+        const colorUnderCursor = this.manager.stateApi.$colorUnderCursor.get();
+
         this.konva.colorPicker.newColor.setAttrs({
           x: cursorPos.x,
           y: cursorPos.y,
-          fill: rgbaColorToString(colorUnderCursor),
+          fill: rgbColorToString(colorUnderCursor),
         });
         this.konva.colorPicker.oldColor.setAttrs({
           x: cursorPos.x,
           y: cursorPos.y,
-          fill: rgbaColorToString(toolState.fill),
+          fill: rgbColorToString(toolState.fill),
         });
         this.konva.colorPicker.innerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
         this.konva.colorPicker.outerBorder.setAttrs({ x: cursorPos.x, y: cursorPos.y });
diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts
index fc5c112abb..af64a2d777 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/events.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/events.ts
@@ -12,7 +12,7 @@ import type {
   CanvasRegionalGuidanceState,
   CanvasV2State,
   Coordinate,
-  RgbaColor,
+  RgbColor,
   Tool,
 } from 'features/controlLayers/store/types';
 import type Konva from 'konva';
@@ -115,7 +115,7 @@ const getLastPointOfLastLineOfEntity = (
   return { x, y };
 };
 
-const getColorUnderCursor = (stage: Konva.Stage): RgbaColor | null => {
+const getColorUnderCursor = (stage: Konva.Stage): RgbColor | null => {
   const pos = stage.getPointerPosition();
   if (!pos) {
     return null;
@@ -126,12 +126,12 @@ const getColorUnderCursor = (stage: Konva.Stage): RgbaColor | null => {
   if (!ctx) {
     return null;
   }
-  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
-  if (r === undefined || g === undefined || b === undefined || a === undefined) {
+  const [r, g, b, _a] = ctx.getImageData(0, 0, 1, 1).data;
+  if (r === undefined || g === undefined || b === undefined) {
     return null;
   }
 
-  return { r, g, b, a };
+  return { r, g, b };
 };
 
 export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
@@ -195,9 +195,11 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
 
     if (toolState.selected === 'colorPicker') {
       const color = getColorUnderCursor(stage);
-      manager.stateApi.$colorUnderCursor.set(color);
       if (color) {
-        manager.stateApi.setFill(color);
+        manager.stateApi.$colorUnderCursor.set(color);
+      }
+      if (color) {
+        manager.stateApi.setFill({ ...color, a: 1 });
       }
       manager.preview.tool.render();
     } else {
@@ -345,7 +347,9 @@ export const setStageEventHandlers = (manager: CanvasManager): (() => void) => {
 
     if (toolState.selected === 'colorPicker') {
       const color = getColorUnderCursor(stage);
-      manager.stateApi.$colorUnderCursor.set(color);
+      if (color) {
+        manager.stateApi.$colorUnderCursor.set(color);
+      }
     } else {
       const isDrawable = selectedEntity?.state.isEnabled;
       if (pos && isDrawable && !$spaceKey.get() && getIsPrimaryMouseDown(e)) {