diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
index d3238e89f00..d93bec0e6cc 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
@@ -112,7 +112,7 @@ describe("calcite-color-picker-hex-input", () => {
 
   it("commits shorthand hex on blur", async () => {
     const defaultHex = "#b33f33";
-    const editedHex = "#aabbcc";
+    const expandedHex = "#aabbcc";
     const page = await newE2EPage();
     await page.setContent(`<calcite-color-picker-hex-input value='${defaultHex}'></calcite-color-picker-hex-input>`);
 
@@ -129,19 +129,20 @@ describe("calcite-color-picker-hex-input", () => {
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHex);
+    expect(await input.getProperty("value")).toBe(expandedHex);
 
     await selectText(input);
     await page.keyboard.type("abcd");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHex);
+    expect(await input.getProperty("value")).toBe(expandedHex);
   });
 
-  it("commits shorthand hexa on blur", async () => {
+  it("commits shorthand hex and hexa on blur", async () => {
     const defaultHexa = "#b33f33ff";
-    const editedHexa = "#aabbccdd";
+    const expandedHexa = "#aabbccdd";
+    const expandedHex = "#aabbccff";
     const page = await newE2EPage();
     await page.setContent(
       `<calcite-color-picker-hex-input alpha-channel value='${defaultHexa}'></calcite-color-picker-hex-input>`,
@@ -149,25 +150,32 @@ describe("calcite-color-picker-hex-input", () => {
 
     const input = await page.find(`calcite-color-picker-hex-input`);
     await selectText(input);
-    await page.keyboard.type("abc");
+    await page.keyboard.type("ab");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
     expect(await input.getProperty("value")).toBe(defaultHexa);
 
+    await selectText(input);
+    await page.keyboard.type("abc");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(expandedHex);
+
     await selectText(input);
     await page.keyboard.type("abcd");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHexa);
+    expect(await input.getProperty("value")).toBe(expandedHexa);
 
     await selectText(input);
     await page.keyboard.type("abcde");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHexa);
+    expect(await input.getProperty("value")).toBe(expandedHexa);
   });
 
   it("normalizes value when initialized", async () => {
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
index 173b9ab8256..e69b96e6959 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
@@ -176,8 +176,9 @@ export class ColorPickerHexInput extends LitElement implements LoadableComponent
     const { allowEmpty, internalColor } = this;
     const willClearValue = allowEmpty && !inputValue;
     const isLonghand = isLonghandHex(hex);
+    const anyShorthand = isShorthandHex(hex, true) || isShorthandHex(hex, false);
 
-    if (isShorthandHex(hex, this.alphaChannel)) {
+    if (anyShorthand) {
       // ensure modified pasted hex values are committed since we prevent default to remove the # char.
       this.onHexInputChange();
     }