diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
index 1d2311b0b..a75ea717f 100644
--- a/components/lib/colorpicker/style/ColorPickerStyle.js
+++ b/components/lib/colorpicker/style/ColorPickerStyle.js
@@ -16,7 +16,7 @@ const theme = ({ dt }) => `
     padding: 0;
     border: 0 none;
     border-radius: ${dt('colorpicker.preview.border.radius')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
     cursor: pointer;
 }
@@ -31,8 +31,8 @@ const theme = ({ dt }) => `
 .p-colorpicker-panel {
     background: ${dt('colorpicker.panel.background')};
     border: 1px solid ${dt('colorpicker.panel.border.color')};
-    border-radius: ${dt('border.radius.md')};
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    border-radius: ${dt('colorpicker.panel.border.radius')};
+    box-shadow: ${dt('colorpicker.panel.shadow')};
     width: 193px;
     height: 166px;
     position: absolute;
diff --git a/components/lib/themes/aura/colorpicker/index.js b/components/lib/themes/aura/colorpicker/index.js
index 9bfce0973..776b8e9d6 100644
--- a/components/lib/themes/aura/colorpicker/index.js
+++ b/components/lib/themes/aura/colorpicker/index.js
@@ -11,6 +11,10 @@ export default {
             shadow: '{focus.ring.shadow}'
         }
     },
+    panel: {
+        shadow: '{overlay.popover.shadow}',
+        borderRadius: '{overlay.popover.borderRadius}'
+    },
     colorScheme: {
         light: {
             panel: {
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index 483948a71..2437c4a7d 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -247,7 +247,6 @@ export default {
                         background: '{surface.0}',
                         borderColor: '{surface.200}',
                         color: '{text.color}',
-                        shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
                     },
                     popover: {
                         background: '{surface.0}',
diff --git a/components/lib/themes/lara/colorpicker/index.js b/components/lib/themes/lara/colorpicker/index.js
index 5be3cc502..500d5c0ab 100644
--- a/components/lib/themes/lara/colorpicker/index.js
+++ b/components/lib/themes/lara/colorpicker/index.js
@@ -11,6 +11,10 @@ export default {
             shadow: '{form.field.focus.ring.shadow}'
         }
     },
+    panel: {
+        shadow: '{overlay.popover.shadow}',
+        borderRadius: '{overlay.popover.borderRadius}'
+    },
     colorScheme: {
         light: {
             panel: {