diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
index 5e975708c0..91921ef4cd 100644
--- a/packages/color-area/src/ColorArea.ts
+++ b/packages/color-area/src/ColorArea.ts
@@ -79,8 +79,9 @@ export class ColorArea extends SpectrumElement {
             v: this.y,
         }),
         applyColorToState: ({ s, v }) => {
-            this.x = s;
-            this.y = v;
+            this._x = s;
+            this._y = v;
+            this.requestUpdate();
         },
     });
 
@@ -128,6 +129,7 @@ export class ColorArea extends SpectrumElement {
             this._x = x;
         }
         this.requestUpdate('x', oldValue);
+        this.colorController.applyColorFromState();
     }
 
     private _x = 1;
@@ -150,6 +152,7 @@ export class ColorArea extends SpectrumElement {
             this._y = y;
         }
         this.requestUpdate('y', oldValue);
+        this.colorController.applyColorFromState();
     }
 
     private _y = 1;
diff --git a/packages/color-area/test/color-area.test.ts b/packages/color-area/test/color-area.test.ts
index 8371ef19a2..75e3e445f9 100644
--- a/packages/color-area/test/color-area.test.ts
+++ b/packages/color-area/test/color-area.test.ts
@@ -150,6 +150,38 @@ describe('ColorArea', () => {
             'something custom Color Picker'
         );
     });
+    it('updates color when x value changes', async () => {
+        const el = await fixture<ColorArea>(
+            html`
+                <sp-color-area></sp-color-area>
+            `
+        );
+
+        await el.updateComplete;
+
+        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;
+
+        expect(handle.color).to.equal('hsl(0, 100%, 50%)');
+        el.x = 0.3;
+        await el.updateComplete;
+        expect(handle.color).to.equal('hsl(0, 100%, 85%)');
+    });
+    it('updates color when y value changes', async () => {
+        const el = await fixture<ColorArea>(
+            html`
+                <sp-color-area></sp-color-area>
+            `
+        );
+
+        await el.updateComplete;
+
+        const handle = el.shadowRoot.querySelector('.handle') as ColorHandle;
+
+        expect(handle.color).to.equal('hsl(0, 100%, 50%)');
+        el.y = 0.7;
+        await el.updateComplete;
+        expect(handle.color).to.equal('hsl(0, 100%, 35%)');
+    });
     it('accepts `hue` values', async () => {
         const el = await fixture<ColorArea>(
             html`