diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index ebf084bdc..b9e03f98d 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Improved `sl-color-picker` grid handle size and color
 - Updated to Popper 2.5.3 to address a fixed position bug in Firefox
 
 ## 2.0.0-beta.20
diff --git a/src/components/color-picker/color-picker.scss b/src/components/color-picker/color-picker.scss
index 3e67729a1..c642ae079 100644
--- a/src/components/color-picker/color-picker.scss
+++ b/src/components/color-picker/color-picker.scss
@@ -10,7 +10,7 @@
 :host {
   --grid-width: 260px;
   --grid-height: 200px;
-  --grid-handle-size: 12px;
+  --grid-handle-size: 16px;
   --slider-height: 10px;
   --slider-handle-size: 12px;
 
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index b4e73eb97..318db5454 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -644,7 +644,8 @@ export class ColorPicker {
               class="color-picker__grid-handle"
               style={{
                 top: `${y}%`,
-                left: `${x}%`
+                left: `${x}%`,
+                backgroundColor: `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%)`
               }}
               role="slider"
               aria-label="HSL"