diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index 731664e880..912693171e 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -244,6 +244,20 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   display: inline-block;
   position: relative;
   line-height: normal;
+  outline: none;
+
+  &:hover:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      border: 1px solid getCssVar('border-color-hover');
+    }
+  }
+
+  &:focus-visible:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      outline: 2px solid getCssVar('color-primary');
+      outline-offset: 1px;
+    }
+  }
 
   @include when(disabled) {
     .#{$namespace}-color-picker__trigger {
@@ -275,8 +289,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 
   @include e(mask) {
-    height: 38px;
-    width: 38px;
+    height: map.get($color-picker-size, 'default')-2px;
+    width: map.get($color-picker-size, 'default')-2px;
     border-radius: 4px;
     position: absolute;
     top: 1px;