diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
index eb5c0df9e07..798dfbb619b 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -2240,5 +2240,31 @@ describe("calcite-color-picker", () => {
         left: "0px",
       });
     });
+
+    describe("alpha channel", () => {
+      it("allows editing alpha value via keyboard", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-color-picker alpha-channel value="#ffffffff"></calcite-color-picker>`);
+
+        const picker = await page.find("calcite-color-picker");
+        const scope = await page.find(`calcite-color-picker >>> .${CSS.opacityScope}`);
+
+        await scope.press("ArrowDown");
+        expect(await picker.getProperty("value")).toBe("#fffffffc");
+        await scope.press("ArrowDown");
+        expect(await picker.getProperty("value")).toBe("#fffffffa");
+        await scope.press("ArrowDown");
+        expect(await picker.getProperty("value")).toBe("#fffffff7");
+
+        await scope.press("ArrowUp");
+        expect(await picker.getProperty("value")).toBe("#fffffffa");
+
+        await scope.press("ArrowRight");
+        expect(await picker.getProperty("value")).toBe("#fffffffc");
+
+        await scope.press("ArrowLeft");
+        expect(await picker.getProperty("value")).toBe("#fffffffa");
+      });
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index 76ab2beba24..0ff0f9decf7 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -723,7 +723,6 @@ export class ColorPicker
       colorFieldScopeLeft,
       colorFieldScopeTop,
       dimensions: {
-        colorField: { width: colorFieldWidth },
         slider: { width: sliderWidth },
         thumb: { radius: thumbRadius },
       },
@@ -746,7 +745,7 @@ export class ColorPicker
     const opacityTop = thumbRadius;
     const opacityLeft =
       opacityScopeLeft ??
-      (colorFieldWidth * alphaToOpacity(DEFAULT_COLOR.alpha())) / OPACITY_LIMITS.max;
+      (sliderWidth * alphaToOpacity(DEFAULT_COLOR.alpha())) / OPACITY_LIMITS.max;
     const noColor = color === null;
     const vertical = scopeOrientation === "vertical";
     const noHex = hexDisabled || hideHex;
@@ -1560,16 +1559,18 @@ export class ColorPicker
     const modifier = event.shiftKey ? 10 : 1;
     const { key } = event;
     const arrowKeyToXOffset = {
-      ArrowUp: 1,
-      ArrowRight: 1,
-      ArrowDown: -1,
-      ArrowLeft: -1,
+      ArrowUp: 0.01,
+      ArrowRight: 0.01,
+      ArrowDown: -0.01,
+      ArrowLeft: -0.01,
     };
 
     if (arrowKeyToXOffset[key]) {
       event.preventDefault();
-      const delta = opacityToAlpha(arrowKeyToXOffset[key] * modifier);
-      this.captureHueSliderColor(this.opacityScopeLeft + delta);
+      const delta = arrowKeyToXOffset[key] * modifier;
+      const alpha = this.baseColorFieldColor.alpha();
+      const color = this.baseColorFieldColor.alpha(alpha + delta);
+      this.internalColorSet(color, false);
     }
   };