diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
index 6c9b6ceed..1d2311b0b 100644
--- a/components/lib/colorpicker/style/ColorPickerStyle.js
+++ b/components/lib/colorpicker/style/ColorPickerStyle.js
@@ -11,19 +11,21 @@ const theme = ({ dt }) => `
 }
 
 .p-colorpicker-preview {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: ${dt('colorpicker.preview.width')};
+    height: ${dt('colorpicker.preview.height')};
     padding: 0;
     border: 0 none;
-    border-radius: ${dt('border.radius.md')};
-    transition: outline-color ${dt('transition.duration')};
+    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')};
     outline-color: transparent;
     cursor: pointer;
 }
 
 .p-colorpicker-preview:enabled:focus-visible {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
-    outline-offset: ${dt('focus.ring.offset')};
+    border-color: ${dt('colorpicker.preview.focus.border.color')};
+    box-shadow: ${dt('colorpicker.preview.focus.ring.shadow')};
+    outline: ${dt('colorpicker.preview.focus.ring.width')} ${dt('colorpicker.preview.focus.ring.style')} ${dt('colorpicker.preview.focus.ring.color')};
+    outline-offset: ${dt('colorpicker.preview.focus.ring.offset')};
 }
 
 .p-colorpicker-panel {
diff --git a/components/lib/themes/aura/colorpicker/index.js b/components/lib/themes/aura/colorpicker/index.js
index 03bab0c37..9bfce0973 100644
--- a/components/lib/themes/aura/colorpicker/index.js
+++ b/components/lib/themes/aura/colorpicker/index.js
@@ -1,4 +1,16 @@
 export default {
+    preview: {
+        width: '1.5rem',
+        height: '1.5rem',
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: '{focus.ring.shadow}'
+        }
+    },
     colorScheme: {
         light: {
             panel: {
diff --git a/components/lib/themes/lara/colorpicker/index.js b/components/lib/themes/lara/colorpicker/index.js
index 03bab0c37..5be3cc502 100644
--- a/components/lib/themes/lara/colorpicker/index.js
+++ b/components/lib/themes/lara/colorpicker/index.js
@@ -1,4 +1,16 @@
 export default {
+    preview: {
+        width: '1.75rem',
+        height: '1.75rem',
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
+    },
     colorScheme: {
         light: {
             panel: {