diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss
index e907d0ade..1609681cf 100644
--- a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss
+++ b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss
@@ -7,8 +7,18 @@
     justify-content: center;
 }
 
-.bp-ColorPickerControl-button {
+.bp-ColorPickerControl-toggle {
     @include bp-ControlButton;
+
+    &.bp-is-active,
+    &:focus,
+    &:hover {
+        .bp-ColorPickerControl-toggle-background {
+            padding: 8px;
+            background-color: $fours;
+            border-radius: 4px;
+        }
+    }
 }
 
 .bp-ColorPickerControl-palette {
@@ -38,7 +48,7 @@
     }
 }
 
-.bp-ColorPickerControl-swatch {
+.bp-ColorPickerControl-toggle-swatch {
     width: 18px;
     height: 18px;
     border: 2px solid #fff;
diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
index 8e428c007..5c4b7eac3 100644
--- a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
+++ b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx
@@ -37,14 +37,16 @@ export default function ColorPickerControl({
     return (
         <div className="bp-ColorPickerControl">
             <button
-                className="bp-ColorPickerControl-button"
-                data-testid="bp-ColorPickerControl-button"
+                className={classNames('bp-ColorPickerControl-toggle', { 'bp-is-active': isColorPickerToggled })}
+                data-testid="bp-ColorPickerControl-toggle"
                 onBlur={handleBlur}
                 onClick={handleClick}
                 type="button"
                 {...rest}
             >
-                <div className="bp-ColorPickerControl-swatch" style={{ backgroundColor: activeColor }} />
+                <div className="bp-ColorPickerControl-toggle-background">
+                    <div className="bp-ColorPickerControl-toggle-swatch" style={{ backgroundColor: activeColor }} />
+                </div>
             </button>
             <div
                 className={classNames('bp-ColorPickerControl-palette', { 'bp-is-open': isColorPickerToggled })}
diff --git a/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx b/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
index af89da004..7ba1fbfc0 100644
--- a/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
+++ b/src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx
@@ -12,7 +12,7 @@ describe('ColorPickerControl', () => {
         wrapper.find('[data-testid="bp-ColorPickerControl-palette"]');
 
     const getToggleButton = (wrapper: ShallowWrapper): ShallowWrapper =>
-        wrapper.find('[data-testid="bp-ColorPickerControl-button"]');
+        wrapper.find('[data-testid="bp-ColorPickerControl-toggle"]');
 
     describe('render', () => {
         test('should not render ColorPickerPalette when the component is first mounted', () => {
@@ -29,6 +29,17 @@ describe('ColorPickerControl', () => {
             expect(getColorPickerPalette(wrapper).hasClass('bp-is-open')).toBe(true);
         });
 
+        test('should apply toggle background when the toggle button is clicked and remove the background when the button is blurred', () => {
+            const wrapper = getWrapper();
+            const toggleButton = getToggleButton(wrapper);
+
+            toggleButton.simulate('click');
+            expect(getToggleButton(wrapper).hasClass('bp-is-active')).toBe(true);
+
+            toggleButton.simulate('blur');
+            expect(getToggleButton(wrapper).hasClass('bp-is-active')).toBe(false);
+        });
+
         test('should close the palette when button is blurred', () => {
             const wrapper = getWrapper();
             const toggleButton = getToggleButton(wrapper);